0

我知道我的代码离我想去的地方还很远。我想要实现的是一个项目列表，它们在其中一个接一个地通过向下滑动动画循环。我不知道如何解决这个问题。

html

<div class="message">

                        <ul>
                            <h2><li class="rotate1">A better web...</li></h2>
                            <h2><li class="rotate2">Built By Spring Method</li></h2>
                            <h2><li class="rotate3">Test content</li></h2>

                        </ul>


                </div>

js

$(function() { 
$(".rotate2").hide();
$(".rotate3").hide();

    $(".message ul li").each(function(){
       $(this).slideDown(); 
    });
});
4

1 回答 1

2

这个例子应该为你清除一些事情：

http://jsfiddle.net/mattdlockyer/GhPqu/

关键是为您的动画指定一个函数，然后在第一个 slideDown 方法完成时将其作为函数递归调用。

有关 slideDown 如何工作的更多信息，请查看此处：http ://api.jquery.com/slideDown/

您将看到您可以指定一个完成功能，如下例所示：

$('#clickme').click(function() {
  $('#book').slideDown('slow', function() {
    // Animation complete.
  });
});

我已经使用这种机制递归地调用 animate 函数并迭代到列表中的下一个元素。

由于第 4 个元素不存在，因此不会调用该函数，并且您不会浪费任何周期...

简单优雅的恕我直言！

于 2013-02-02T07:16:43.037 回答