Question

我想逐个下滑4个标题：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Dialog - Animation</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $( function() {
                $( "#h1" ).slideDown( 2000 );
                $( "#h2" ).delay( 2000 ).slideDown();
                $( "#h3" ).delay( 2000 ).slideDown();
                $( "#h4" ).delay( 2000 ).slideDown();
            });
        </script>
    </head>
    <body>

        <div>
            <h1 id="h1" style="display: none;">First line</h1>
            <h2 id="h2" style="display: none;">Second line</h2>
            <h3 id="h3" style="display: none;">Third line</h3>
            <h4 id="h4" style="display: none;">Fourth line</h4>
        </div> 

    </body>
</html>

我所看到的：

第一个动画：H1幻灯片。确定。

第二部动画。 H2，H3，H4一起滑动。错了 - 我希望得到：H2的第2个动画，H3的第3个动画和H4的第4个动画。

那么，如何让这个动画序列正确呢？

Answer 1

有两种方法可以达到结果：

更新延迟，因为动画队列独立于元素。

$(function() {
  $("#h1").slideDown(2000);
  $("#h2").delay(2000).slideDown(2000);
  $("#h3").delay(4000).slideDown(2000);
  $("#h4").delay(6000).slideDown(2000);
});

＆＃13;

$(function() {
  $("#h1").slideDown(2000);
  $("#h2").delay(2000).slideDown(2000);
  $("#h3").delay(4000).slideDown(2000);
  $("#h4").delay(6000).slideDown(2000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1 id="h1" style="display: none;">First line</h1>
  <h2 id="h2" style="display: none;">Second line</h2>
  <h3 id="h3" style="display: none;">Third line</h3>
  <h4 id="h4" style="display: none;">Fourth line</h4>
</div>

＆＃13;

或者将代码移动到动画complete callback以在动画完成后执行。

$(function() {
  $("#h1").slideDown(2000, function() {
    $("#h2").slideDown(2000, function() {
      $("#h3").slideDown(2000, function() {
        $("#h4").slideDown(2000);
      });
    })
  })
});

＆＃13;

$(function() {
  $("#h1").slideDown(2000, function() {
    $("#h2").slideDown(2000, function() {
      $("#h3").slideDown(2000, function() {
        $("#h4").slideDown(2000);
      });
    })
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1 id="h1" style="display: none;">First line</h1>
  <h2 id="h2" style="display: none;">Second line</h2>
  <h3 id="h3" style="display: none;">Third line</h3>
  <h4 id="h4" style="display: none;">Fourth line</h4>
</div>

＆＃13;

Answer 2

只需更改秒数：

＆＃13;

$(function() {
  $("#h1").slideDown(2000);
  $("#h2").delay(3000).slideDown();
  $("#h3").delay(4000).slideDown();
  $("#h4").delay(5000).slideDown();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1 id="h1" style="display: none;">First line</h1>
  <h2 id="h2" style="display: none;">Second line</h2>
  <h3 id="h3" style="display: none;">Third line</h3>
  <h4 id="h4" style="display: none;">Fourth line</h4>
</div>

＆＃13;

或者使用下一个动画作为回调：

＆＃13;

$(function() {
  $("#h1").slideDown(2000, function() {
    $("#h2").slideDown(2000, function() {
      $("#h3").slideDown(2000, function() {
        $("#h4").slideDown(2000);
      });
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1 id="h1" style="display: none;">First line</h1>
  <h2 id="h2" style="display: none;">Second line</h2>
  <h3 id="h3" style="display: none;">Third line</h3>
  <h4 id="h4" style="display: none;">Fourth line</h4>
</div>

＆＃13;

Answer 3

您可以使用each循环功能与header selector一起使用所有标题：

$(':header').each(function(i,v){
  $(this).delay(i*2000).slideDown();
});

或者，如果您只想要特定标题，请选择：

$('#h1,#h2,#h3,#h4').each(function(i,v){

Slidedown标题元素一个接一个地具有顺序延迟

3 个答案: