Question

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

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

我脚本的所有单独部分都有效。动画淡出效果就是它自己的，而随机播放也是如此。问题是当脚本中有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);
    });
});

我正在使用的随机播放脚本来自此处，除了在我的链中之外，它的工作正常：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)
  });

由于在所有li项上调用fadeout会导致调用n个li回调函数。不知道那是什么效果。

jQuery：fadeOut，shuffle，fadeIn（停止在shuffle工作）

2 个答案: