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

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

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

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

Спасибо


random jquery shuffle fade jquery-animate
person shovelshed    schedule 28.01.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

$('.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/

person maxedison    schedule 28.01.2012
comment
Это прекрасно работает. Спасибо. Просто дополнительная мысль, я пытался. Это заставить каждый отдельный li исчезать один за другим, я понимаю, что это все еще имеет ту же проблему, что и раньше, так как я затухаю li вместо ul, чтобы начать. Я пробовал это: $("li").each(function(i) { $(this).delay(50*i).fadeIn(1000); });, который работает сам по себе, но снова не повезло во всем сценарии. - person shovelshed; 29.01.2012

arrow_upward
0
arrow_downward

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

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

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

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

person JHollanti    schedule 28.01.2012