Question

I have an unordered list. When i click a shuffle button, i need:

1. the items to fade out
2. then randomise
3. then fade back in.

All separate parts of my script work. The animated fade works on it’s own, and the shuffle works. The problem is when shuffle is in the script, that it skips straight to the shuffle, and stops all fade in or out.

Here is my script:

$('.vShuffle').click(function(){
    $('.list li').fadeOut(1000).shuffle().fadeIn(1000);                 
});

I have also tried this, which will fade out, then i assume it shuffles because it doesn’t do anything else after:

$('.vShuffle').click(function(){
    $('.list li').fadeOut(1000, function() {                    
        $('.list li').shuffle();
        $('.list li').fadeIn(1000);
    });
});

The shuffle script i’m using is from here, it works fine other than in my chain: http://mktgdept.com/jquery-shuffle

(function(d){d.fn.shuffle=function(c){c=[];return this.each(function(){c.push(d(this).clone(true))}).each(function(a,b){d(b).replaceWith(c[a=Math.floor(Math.random()*c.length)]);c.splice(a,1)})};d.shuffle=function(a){return d(a).shuffle()}})(jQuery);

Any help would be greatly apprecitated.

Thanks

Answer 1

Without doing some substantial debugging I can’t know exactly what’s going wrong, but I’m guessing the problem has something to do with the following:

$('.list li').fadeOut(1000, function() {                    
    $('.list li').shuffle();
    $('.list li').fadeIn(1000);
});

Do you realize that the code inside the fadeOut callback (i.e. the shuffle() and fadeIn() function calls) is getting run once per every .list li element? In other words, if you have 10 elements that match the .list li selector, you’re actually shuffling and fading in all the .list li elements 10 times. That’s because .fadeOut will be called on every single matching .list li element, and therefore its callback will then be called.

Instead, just call .fadeOut on the containing ul element, and then in the callback call .fadeIn on that containing element as well:

$('.vShuffle').click(function(){
    $('ul').fadeOut(1000, function() {       
        $('li').shuffle();
        $('ul').fadeIn(1000);
    });
});

Here’s a working example: http://jsfiddle.net/mdur4/