jQuery：fadeOut、shuffle、fadeIn（在 shuffle 时停止工作）答案

【问题标题】：jQuery: fadeOut, shuffle, fadeIn (stops working at shuffle)jQuery：fadeOut、shuffle、fadeIn（在 shuffle 时停止工作）
【发布时间】：2012-01-28 12:26:12
【问题描述】：

我有一个无序列表。当我点击随机播放按钮时，我需要：

要淡出的项目
然后随机化
然后淡入。

我的脚本的所有独立部分都有效。动画淡入淡出它自己的作品，洗牌作品。问题是当 shuffle 在脚本中时，它会直接跳到 shuffle，并停止所有淡入或淡出。

这是我的脚本：

$('.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);
    });
});

我正在使用的 shuffle 脚本来自这里，除了在我的链中之外它工作正常：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);

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： jquery random jquery-animate fade shuffle

【解决方案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 元素上被调用，因此它的回调将被调用。

相反，只需在包含 ul 的元素上调用 .fadeOut，然后在包含元素的回调中调用 .fadeIn：

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

这是一个工作示例：http://jsfiddle.net/mdur4/

【讨论】：

这很好用。谢谢。只是一个额外的想法，我一直在努力。是让每个单独的 li 一个接一个地淡入，我意识到这仍然存在与以前相同的问题，因为我淡出 li 而不是 ul 开始。我试过这个：$("li").each(function(i) { $(this).delay(50*i).fadeIn(1000); }); 可以自己运行，但整个脚本也没有运气。

【解决方案2】：

编辑：

其实你得这样用：

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

由于对所有 li 项目调用淡出会导致 n 个 li 回调函数被调用。不知道具体是什么效果。

【讨论】：