CODEWITHSUNDEEP
javascriptjquerydelay
user3438393
user3438393

Reputation:

How to add a delay in javascript?

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
            $(".box02").hide();
                $("#select-02").change(function(){
                    $( "select option:selected").each(function(){
                        if($(this).attr("title")=="0b"){
                            $(".box02").hide();
                            $(".none").show();
                        }
                        if($(this).attr("title")=="1b"){
                            $(".box02").hide();
                            $(".1b").show();
                        }
                        if($(this).attr("title")=="2b"){
                            $(".box02").hide();
                            $(".2b").show();
                        }
                    });
                }).change();
            });
        </script>
    </head>

<body>          
    <select name="roomcount" id="select-02">
        <option title="0b">---</option>
        <option title="1b">1</option>
        <option title="2b">2</option>
    </select><br/><br/>

    <p class="current count">
        <b>Content:</b>
        <br/>
        <div class="padding-box">
            <span class="none box02">...</span>
            <span class="1b box02">show content 1 with delay</span>
            <span class="2b box02">show content 2 with delay</span>
        </div>
    </p>
</html>

How can I add a delay between a transform of a 'span' to another 'span'? Please only change something in the jquery script, because I am using it on multiple sites and can't easily update them and to just change the code it's easier to change.

An example of this delay is on this page: http://store.apple.com/us/buy-mac/mac-pro?product=ME253LL/A&step=config if you change a radio input there is a small delay before it changes.

Thanks, Sake

Upvotes: 0

Views: 224

Answers (3)

RGS
RGS

Reputation: 5211

 $(".box02").hide();
    $("#select-02").change(function(){
      $( "select option:selected").each(function(){
        if($(this).attr("title")=="0b"){
          $(".box02").delay(100).slideUp(500);
          $(".none").delay(100).slideDown(500);
        }
        if($(this).attr("title")=="1b"){
          $(".box02").delay(100).slideUp(500);
          $(".1b").delay(100).slideDown(500);
         }
        if($(this).attr("title")=="2b"){
          $(".box02").delay(100).slideUp(500);
          $(".2b").delay(100).slideDown(500);
         }
      });
  }).change();

Demo:

http://jsfiddle.net/BrKLU/3/

Upvotes: 0

Kiran
Kiran

Reputation: 20293

Use .delay(), .fadeIn() and .fadeOut() effects. Try this:

$(document).ready(function(){
            $(".box02").hide();
                $("#select-02").change(function(){
                    $( "select option:selected").each(function(){
                        if($(this).attr("title")=="0b"){
                            $(".box02").delay(600).fadeOut(400);
                            $(".none").delay(600).fadeIn(400);
                        }
                        if($(this).attr("title")=="1b"){
                            $(".box02").delay(600).fadeOut(400);
                            $(".1b").delay(600).fadeIn(400);
                        }
                        if($(this).attr("title")=="2b"){
                            $(".box02").delay(600).fadeOut(400);
                            $(".2b").delay(600).fadeIn(400);
                        }
                    });
                }).change();
            });

DEMO

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59292

use setTimeout().

The function accepts a function to be executed and milliseconds to wait for execution

For example, if you want to delay an execution of a function by 5 seconds you can do this:

setTimeout(functionName,5000);

Also note, 1 second = 1000 milliseconds.

If you don't have a function, you can put your code in a anonymous function.

setTimeout(function(){
 //do something here
},5000);

Also, there is delay() function in jquery, which is used for animation

Upvotes: 2

Related Questions