2012-01-28 58 views
0

我有一個無序列表。當我點擊一個按鈕洗牌,我需要:jQuery:fadeOut,shuffle,fadeIn(停止在shuffle工作)

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

任何幫助將非常明顯。

感謝

回答

1

沒有做一些實質性的調試我不知道到底發生了什麼錯,但我猜這個問題有事情做下列要求:

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

你意識到fadeOut內的代碼回調(即shuffle()fadeIn()函數調用)正在每個.list li元素運行一次?換句話說,如果您有10個元素與.list li選擇器匹配,則實際上您將在所有.list li元素中混洗和淡入10次。這是因爲每個匹配.list li元素都會調用.fadeOut,因此它的回調將被調用。

相反,只需調用.fadeOut含有ul元素,然後在回撥電話.fadeIn含有元素,以及:

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

這裏有一個工作示例:http://jsfiddle.net/mdur4/

+0

這個偉大的工程。謝謝。只是一個額外的想法,我一直在嘗試。就是讓每個人都一個接一個地褪色,我意識到這仍然有和以前一樣的問題,因爲我淡出李而不是ul開始。我試過這個:'$(「li」)。(函數(i)){(this)。延遲(50 * I).fadeIn(1000); });'它自己的作品,但在整個腳本中再次沒有運氣。 – shovelshed 2012-01-29 14:47:02

0

編輯:

事實上,你必須使用這樣的:

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

由於對所有鋰項目調用淡出導致了李回調函數施氮量被稱爲。不完全知道那是什麼效果。