Question

<!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>

如何在＆＃39; span＆＃39;的变换之间添加延迟？到另一个＆＃39; span＆＃39;？请仅更改jquery脚本中的内容，因为我在多个站点上使用它并且无法轻松更新它们，只需更改代码就可以更容易更改。

此延迟的一个示例是在此页面上：http://store.apple.com/us/buy-mac/mac-pro?product=ME253LL/A&step=config如果您更改无线电输入，则在更改之前会有一个小延迟。

谢谢，清酒

Answer 1

使用setTimeout()。

该函数接受要执行的函数和等待执行的毫秒

例如，如果您想延迟执行一个函数5秒，您可以这样做：

setTimeout(functionName,5000);

另请注意，1秒= 1000毫秒。

如果您没有功能，可以将代码放在匿名函数中。

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

此外，jquery中有delay()函数，用于动画

Answer 2

使用.delay()，.fadeIn()和.fadeOut()效果。试试这个：

$(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

Answer 3

 $(".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();

演示：

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

如何在javascript中添加延迟？

3 个答案: