sequential effects on list-items in jQuery

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

Answers:

Answer

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

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

Use .animates callback function to animate the next element.

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

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?

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.