Question

我有一组<li>，其中有几个<article>元素。当我点击任何<article>时，我希望所有这些都逐一滑出视图。

HTML是：

<li>
  <article class="classname">
  <article class="classname">
</li>
<li>..</li>
<li>..</li>
<li>..</li>

我写的jquery函数是：

$(".classname").click(function(){

        $(this).parent().parent().find('li').each(function(index, item){
            $(item).children().animate({ "left" : "-1000px" }).delay(2000);

        })
    })

问题是当我点击任何文章元素时，所有元素一次滑出视图。不是我想要的一个接一个。可能是什么问题？

Answer 1

延迟功能会延迟队列中后续项目的执行：您需要在动画调用之前延迟一段时间：

$(item).children().delay(index * 2000).animate({ "left" : "-1000px" });

Answer 2

要逐个动画项目，您需要为每篇文章设置不同的delay：

$(item).children().delay(index * 2000).animate({ "left" : "-1000px" });

<强>更新

可能你正在寻找像这样的东西：

$(".classname").click(function(){
    $(".classname").each(function(index, item){
        $(this).delay(index * 100).animate({ "left" : "-1000px", opacity: "0" }, 500)
    })
})

http://jsfiddle.net/L3YS3/1/

Answer 3

delay()向队列添加延迟。
您需要在动画之前输入延迟，而不是在动画之后。

Answer 4

您应该在.animate（）之前调用.delay（）：

$(item).children().delay(2000).animate({ "left" : "-1000px" });

Answer 5

首先调用.delay()，然后调用animate函数：

$(item).children().delay(2000).animate({ "left" : "-1000px" });

一个非常简单的例子：http://jsfiddle.net/EzMzy/

Jquery动画不服从延迟（）

5 个答案: