jQuery中列表项的顺序效果

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将它们水平排列（类似菜单），我想要做的是为

元素的所有列表项添加动画。当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);
})

- vdegenne

Answer 1

演示

---

这是另一种方法（使用不透明度以获得更好的清晰度），在列表项之间具有延迟的情况下，按系列动画显示它们。

---

<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}

- Joseph Marikle

---

谢谢你，我的朋友。你让我成功地使用setTimeout函数完成了工作。我尝试自己编写这个函数，并且最终得到了一些可行的代码，但是最终还是使用了你的代码，因为它更加简洁、紧凑。感谢你！ *并且继续使用这些原始名称 :) - vdegenne

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

试试这个等待的这里，或者不等待的这里。

- icktoofay

---

不错的演示@icktoofay，无论如何，与Joseph的帖子中的问题相同。 - vdegenne

为什么要将等待时间乘以索引的值？ 无论如何，感谢您的帮助，这正是我在寻找的。 - vdegenne

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/

- Maverick

---

很好，这是一个整洁的代码。然而，我在我的编辑中发布了一个方法，以达到相同的效果，但是每个具有前一个兄弟元素的元素都不等待函数animate()完成。谢谢。 - vdegenne

Answer 4

使用 .animate 的回调函数来动画化下一个元素。

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

- Joseph Marikle

---

如果<li>的数量是一个变量会怎样？如果菜单每个页面都不同会怎样？ - Maverick

@Joseph 谢谢，这个方法很好用！但是动画太长了，因为每个函数都在等待其父级完成，我该如何定义每个项目动画之间的休眠时间，以便每个自上而下的过程都能进行，而不受后续项目的触发影响？ - vdegenne

@Matt 如果你只有三个，那当然不会起作用！如果你的要求是为任意数量的li提供解决方案，那么你的代码需要更复杂。但如果你只需要简单的解决方案，这很容易实现。 - Joseph Marikle

@Oddantfr 我得稍后再发另一个答案（得走了），但基本上你只需要使用几个setTimeout函数调用即可实现。 - Joseph Marikle

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

此外，我在存储库中创建了一个演示版本，可以在这里找到：

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

目前它还不能做太多事情，但你们觉得这个插件怎么样？

- Martin Andreas