javascript - jQuery: Staggered animation on list of elements - Stack Overflow

admin管理员组

文章数量:1313141

I have a navigation container with vertically ordered links inside. What I would like is for each link to fade in and fly from left to right. I am not sure however how to do this sequentially? I have code that does them all at once but I want to do them one at a time. Or at least have them staggered so there is an arbitary delay between animations firing

Code:

$(document).ready(function(){
    $("#navigation a")
        .css({opacity:0,"margin-right":"10px"})
        .animate({opacity:1,"margin-right":"0"});
});

I have a navigation container with vertically ordered links inside. What I would like is for each link to fade in and fly from left to right. I am not sure however how to do this sequentially? I have code that does them all at once but I want to do them one at a time. Or at least have them staggered so there is an arbitary delay between animations firing

Code:

$(document).ready(function(){
    $("#navigation a")
        .css({opacity:0,"margin-right":"10px"})
        .animate({opacity:1,"margin-right":"0"});
});

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jan 6, 2013 at 16:01 ChrisChris 27.4k4949 gold badges206206 silver badges357357 bronze badges 1

• something similar stackoverflow./questions/3583942/… – Amitd Commented Jan 6, 2013 at 16:25

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

This is a perfect use for $.queue. Thanks for the question: you made me learn how to use it a little better to research this.

Here's a live example: http://jsfiddle/EJgEC/

// Cache our jQuery-wrapped objects
var $navigation = $('#navigation'),
    $navigationLinks = $navigation.find('a');

// Set the initial state on navigation links for future animation
$navigationLinks.css({
  opacity: 0,
  "margin-left": "20px"
});

$navigationLinks.each(function (i, item) {
  var $item = $(item);

  // Add animations on each item to the fx queue on the navigation DOM element
  $.queue($navigation[0], 'fx', function () {
    var that = this;
    $item.animate({
      opacity: 1,
      "margin-left": "0"
    }, {
      plete: function () {
        // Fire the next item in the queue as the callback
        $.dequeue(that);
      }
    });
  });
});

// Start the navigation queue
$navigation.dequeue();

I also highly suggest reading up on $.queue: it's worth knowing about. http://api.jquery./jQuery.queue/

Update

As Nate mented below, arguments.callee is deprecated. Although not everyone agrees on this matter, generally deprecated functionality should be avoid. Thanks to Nate, the following will work without using arguments.callee.

Working Example: http://jsbin./idizi/1359/edit

var paras = $('p'),
    i = 0;

// If using jQuery 1.3 or lower, you need to do 
// $(paras[i++] || []) to avoid an "undefined" error
function animateNav () {
    $(paras[i++]).fadeIn('fast', animateNav)
                 .css({opacity:0,"margin-left":"10px"})
                 .animate({opacity:1,"margin-left":"0"});
}

animateNav();

---

This will get the desired result.

Working Example: http://jsbin./idizi/1356/edit

var paras = $('p'),
        i = 0;

// If using jQuery 1.3 or lower, you need to do 
// $(paras[i++] || []) to avoid an "undefined" error
(function() {
  $(paras[i++]).fadeIn('fast', arguments.callee)
               .css({opacity:0,"margin-right":"10px"})
               .animate({opacity:1,"margin-right":"0"});
})();

via http://net.tutsplus./tutorials/javascript-ajax/quick-tip-easy-sequential-animations-in-jquery/

$(document).ready(function(){
   var links =  $("#navigation a");
   var count = 0;

   var handle = setInterval(function(){
         $(links[count])
            .css({opacity:0,"margin-right":"10px"})
            .animate({opacity:1,"margin-right":"0"});
             count++;

             if(count==links.length){
                  clearInterval(handle);
              }                

    }, 5000);



});

Here is a non-jQuery-dependent solution.

The Fiddle: http://jsfiddle/N9afT/

   function stagger(targets, interval, action){
    for (var i = 0, maxi = targets.length; i < maxi; i++) {
        (function(){
            var target = targets[i];
            setTimeout(function(){action(target);}, interval*i);
        })();
    }
   }

example:

stagger([1, 2, 3], 1000, function(val){console.log(val)})

But of course, it can also be applied to jquery targets.

stagger($(".element-class"), 1000, function(el){console.log(el)})

My 2 cents on the topic as well, since I was looking for an idea too. I came up with this for my case:

// in On-Ready wrapper

$('nav li')
.hide(0)   // instant, no animation, 
.each(function (i) {
  $(this)
    .delay(i * 400)    // stagger the following animation
    .fadeIn("slow");
});

In the context of the question above, this would look like

// in On-Ready wrapper

$('#navigation a')
.css({opacity: 0, marginRight: '10px'}) 
.each(function (i) {
  $(this)
    .delay(i * 400)    // stagger the following animation
    .animate({opacity: 1, marginRight: 0});
});

This works, because .each(cb(index)) gives us an index for each child, and the children get a delay and an animation (in that order) added to their FX-Queue :)

Btw, instead of .delay() you can use the .animate({}, options={delay: 123}) delay to set it.

本文标签： javascriptjQuery Staggered animation on list of elementsStack Overflow