jQuery : fadeOut, shuffle, fadeIn (셔플에서 작동하지 않음)

Question

나는 순서가 없습니다. 내가 셔플 버튼을 클릭하면, 내가 필요

1. 항목이 페이드 아웃
2. 다음
3. 후 다시 페이드 내 스크립트 작업

모든 별도의 부품 randomise.. 살아 움직이는듯한 퇴색은 그것의 자신에 작동하고, 뒤섞음은 작동한다. 문제는 스크립트에 셔플이 있고 셔플로 바로 건너 뛰고 모든 페이드 인 또는 아웃을 중지하는 경우입니다. 여기

내 스크립트입니다

$('.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 요소마다 한 번 실행됩니까? 즉, .list li 선택기와 일치하는 요소가 10 개있는 경우 실제로 .list li 요소를 10 번 이동하고 페이드 인합니다. 이는 .fadeOut이 매 요소 .list li 요소를 매칭 할 때마다 호출되어 콜백이 호출되기 때문입니다.

대신에, 단지뿐만 아니라이 포함 된 요소에 콜백 호출 .fadeIn에 다음이 포함 ul 요소에 .fadeOut를 호출 :

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

리 콜백 함수의 n 개의 양의 리드 호출 될 . 그 효과가 정확히 무엇인지 모릅니다.