对 jQuery 中列表项的顺序影响

Question

here's the snippet of my code:

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

I use css to style them horizontally (menu-like) and what I would like to do is to animate all the list-items of the <ul> element. I top them when the dom is ready and animate them to the bottom to attract users' eyes when the entire page is loaded.

here's the jquery code:

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

I know how to sequence effects with queue() or calling functions one by one but on only one element, I'm lost in this case..

EDIT: for those who are interested, here's the code to accomplish this sequence, thanks to 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

---

Here is another way (using opacity for clarity) that animates the list items in series with a delay in between.

---

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

_{* pardon the less than original names... it's late:P}

Answer 2

Try something like this:

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

Edit: If you'd like them to animate sequentially but not wait for the previous one, you can try this:

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

Try the one that waits here , or the one that doesn't wait 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);

Here is a demo: http://jsfiddle.net/rpvyZ/

Answer 4

as of this request, I wrote a jQuery plugin to walk sequencially through a list of (any) elements and applying css changes.

You can checkout the Plugin here:

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

There I made it quite easy to apply those effects by defining the list and the effect options as a JavaScript object. For the first version I created the possiblity to define the delay of the changes between the elements as well as the options to define a starting index to define on which element the changes should be applied.

With the plugin you can do something like this:

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

By applying css stylesheet changes by rotating through the list elements:

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

Also I created and a demo in the repo, which is available here:

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

So, far it can't do much, but what do you guys think of that Plugin?

Answer 5

Use .animate s callback function to animate the next element.

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