Question

这是我的代码片段：

<ul>
    <li><a href="home">Home</a></li>
    <li><a href="links">Links</a></li>
    <li><a href="contact">Contact</a></li>
</ul>

我使用css水平设置它们（类似于菜单），我想要做的是为<ul>元素的所有列表项设置动画。当dom准备就绪时我将它们放在首位，并在整个页面加载时将它们设置为底部以吸引用户的眼睛。

这是jquery代码：

$(function(){
    $("ul li").css('top', '-40px'); //items are in relative position

    $(window).bind("load", items_animate, false);
});

function items_animate(){
       ... //I'd like to animate each <li> of the <ul> changing 'top' to '0px' but not simultaneously, I want to declare a DELAY between each animation (<li>'s get down in a row)
}

我知道如何使用queue（）对函数进行排序或逐个调用函数，但只有一个元素，我在这种情况下迷失了......

编辑：对于那些感兴趣的人来说，这是完成此序列的代码，感谢Joseph

var animationDelay = 600;
var offset = 200;

function blah(meh) {
    setTimeout(function(){
        $(meh).animate({
            opacity: "0"
        }, animationDelay);
    },$(meh).index() * offset)
}

$("li").each(function(){
    blah(this);
})

Answer 1

Demo

这是另一种方式（为了清晰起见使用不透明度），它将串联动画列表项，并在两者之间延迟。

<ul>
    <li><a href="home">Home</a></li>
    <li><a href="links">Links</a></li>
    <li><a href="contact">Contact</a></li>
</ul>

var animationDelay = 600;
var offset = 200;

function blah(meh) {
    setTimeout(function(){
        $(meh).animate({
            opacity: "0"
        }, animationDelay);
    },$(meh).index() * offset)
}

$("li").each(function(){
    blah(this);
})

_{* 原谅不到原来的名字......已经晚了：P}

Answer 2

尝试这样的事情：

$(function() {
    function animateSequentially(element, properties, duration) {
        element.animate(properties, duration, function() {
            animateSequentially(element.next(), properties, duration);
        });
    }
    animateSequentially($("ul > li:first-child"), {top: '0'}, 1000);
});

编辑：如果您希望他们按顺序设置动画但不等待上一个动画，您可以试试这个：

$(function() {
    $("ul > li").each(function(index, item) {
        setTimeout(function() {
            $(item).animate({top: '0'}, 500);
        }, index*175);
    });
});

尝试等待here的人，或等待here的人。

Answer 3

function slide_down_recursive(e,duration,callback)
{
    $(e).animate(
    {
        top: '0px'
    }, duration, 'linear',function()
    {
        if($(e).next().length == 0)
        {
            if(typeof(callback) == 'function')
            {
                callback();
            }
            return;
        }
        else
        {
            // Apply recursion for every sibling.
            slide_down_recursive($(e).next(),duration,callback);
        }
    });

} // End slide_down_recursive
slide_down_recursive($('li:first-child'),500);

以下是演示：http://jsfiddle.net/rpvyZ/

Answer 4

使用.animate的回调函数为下一个元素设置动画。

  $('li:eq(0)').animate({
    top: "0px"
  }, 5000, function() {
    $('li:eq(1)').animate({
      top: "0px"
    }, 5000, function() {
      ...
    });
  });

Answer 5

截至此请求，我编写了一个jQuery插件，以顺序方式遍历（任意）元素列表并应用css更改。

您可以在此处查看插件：

https://github.com/ieservices/frontend-components/tree/master/jQuery/Plugins/jquery.list-effects

通过将列表和效果选项定义为JavaScript对象，我可以很容易地应用这些效果。对于第一个版本，我创建了定义元素之间变化延迟的可能性，以及定义起始索引的选项，以定义应该应用更改的元素。

使用该插件，您可以执行以下操作：

<div id="myList">
<h4>This is my list</h4>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

通过旋转列表元素来应用css样式表更改：

jQuery('#myList ul li').listEffect(
  {delay: '2000', attribute: 'color', value: '#ccc'}
);

我也在repo中创建了一个演示，可以在这里找到：

https://github.com/ieservices/frontend-components/blob/master/jQuery/Plugins/jquery.list-effects/demo/list-effects-demo-simple.html

所以，它远远不能做多少，但你们怎么看待插件？

对jQuery中列表项的连续影响

5 个答案:

Demo