jQuery animation function to apply to elements randomly

Question

I have a function that makes 6 elements on my page, fall and bounce using jQuery UI easings.

function drop_points(){
        $('.pointer').animate({
            top : '+=400'   
        }, 700, 'easeOutBounce');
    };

At the minute, each element drops at the same time, Is there a way I could apply this function to randomly have them drop 1 after the other?

The markup for each pointer is as so...

<a href="#" class="pointer c1"></a>
<a href="#" class="pointer c2"></a>
<a href="#" class="pointer c3"></a>
etc...

I know I could use callbacks and target them individually only this seems bloated and I'm just curious if there's a better alternative.

Thanks

score 2 · Answer 1 · answered Aug 29 '13 at 14:49

This first part is to add the function shuffle to the javascript Array object

Array.prototype.shuffle = function() {
  var i = this.length, j, temp;
  if ( i == 0 ) return this;
  while ( --i ) {
     j = Math.floor( Math.random() * ( i + 1 ) );
     temp = this[i];
     this[i] = this[j];
     this[j] = temp;
  }
  return this;
}

Then

var array = [1,2,3,4,5,6].shuffle();
var counter = 0

function drop_points(){
  $('.c'+array[counter]).animate({top :'+=400'}, 700, 'easeOutBounce',function(){
    counter++;
    if(counter<array.length-1)drop_points();
  });
}

score 1 · Accepted Answer · edited May 23 '17 at 12:13

Solution to have the animation end at different times:

function drop_points(){
        $('.pointer').each(function(){
             $(this).animate({
                top : '+=400'   
            }, 400 + Math.random()*600, 'easeOutBounce'); 
                    // random duration between 0.4 and 1 seconds
     });
};

Each time animate is called, it will be with a different duration.

General solution to have the animations start one after the other ends: https://stackoverflow.com/a/1218507/1669279 The solution involves nesting callbacks and selecting each item at a time.

Very specific solution to have the animations start one after the other ends:

This solution only works if the duration of all animations is the same.

function drop_points(){
        var delay = 0;
        var duration = 700;
        $('.pointer').each(function(){
             $(this).delay(delay).animate({
                top : '+=400'   
            }, duration, 'easeOutBounce'); 
            delay += duration;
     });
};

*These solutions don't take into account randomizing the order of the elements. Take a look at this answer if you have trouble with that specific aspect: https://stackoverflow.com/a/14555430/1669279

This will make them go off at the same time but take more time to complete. — Patsy Issa, Aug 29 '13 at 14:52
They will all start at the same time, but each animation will have a different duration, so they will end at different times. The average time will still be 700ms. — Tibos, Aug 29 '13 at 14:54

score 1 · Answer 3 · answered Aug 29 '13 at 14:58

var time = 700,
    // get the elements and "shuffle" them around
    pointer = $(".pointer").get().sort(function(a, b) {
        return Math.random() > 0.5;
    });

// drop them one after another
$.each(pointer, function(i, e) {
    setTimeout(function() {
        $(e).animate({
            top: "+=400"
        }, time);
    }, (i * time));
});

fiddle

jQuery animation function to apply to elements randomly

3 Answers3