jQuery: fadeOut, shuffle, fadeIn (перестает работать в случайном порядке)

Question

У меня есть неупорядоченный список. Когда я нажимаю кнопку воспроизведения в случайном порядке, мне нужно:

1. предметы, которые исчезают
2. затем рандомизировать
3. затем исчезнуть.

Все отдельные части моего скрипта работают. Анимированное затухание работает само по себе, и случайное воспроизведение работает. Проблема в том, что когда в сценарии присутствует случайное перемешивание, оно пропускается прямо к случайному перемешиванию и останавливает все постепенное исчезновение или исчезновение.

Вот мой сценарий:

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

Я также попробовал это, которое исчезнет, ​​затем я предполагаю, что оно тасуется, потому что после ничего не делает:

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

Сценарий случайного воспроизведения, который я использую, отсюда, он отлично работает, кроме моей цепочки: 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);

Любая помощь будет принята с благодарностью.

Спасибо

Answer 1

Без какой-либо существенной отладки я не могу точно знать, что происходит, но я предполагаю, что проблема связана со следующим:

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

Вы понимаете, что код внутриfadeOut обратный вызов (то есть вызовы функций shuffle() и fadeIn()) запускается один раз для каждого элемента .list li?Другими словами, если у вас есть 10 элементов, которые соответствуют селектору .list li, вы фактически перетасуете все элементы .list li 10 раз.Это потому, что .fadeOut будет вызываться для каждого соответствующего элемента .list li, и поэтому будет вызываться его обратный вызов.

Вместо этого просто вызовите .fadeOut для содержащего элемента ul, а затемобратный вызов .fadeIn также для этого содержащего элемента:

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

Вот рабочий пример: http://jsfiddle.net/mdur4/

Answer 2

РЕДАКТИРОВАТЬ:

На самом деле, вы должны использовать это так:

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

Поскольку вызов fadeout для всех элементов li приводит к n количеству функций обратного вызова li. Не знаю точно, каков эффект этого.