Question

我知道我的代码远远没有达到我想去的地方。我想要实现的是一个项目列表，它们在一个接一个的下拉动画中循环。我不知道如何处理这个问题。

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(); 
    });
});

Answer 1

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

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

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

有关slideDown如何工作的详细信息，请点击此处：http://api.jquery.com/slideDown/

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

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

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

由于第4个元素不存在，因此不会调用函数，也不会浪费任何循环...

简单而优雅的imho！

我想创建一个通过slidedown函数旋转的列表

1 个答案: