fadeOut/In 함수는 깜박임을 만듭니다.

Question

버튼을 클릭 할 때 일부 div를 표시하거나 숨기려면 제목 값을 사용하고 있습니다. 첫 번째 버튼에는 ab 값이있는 div 만 표시되며 두 번째 버튼에는 모든 div가 표시됩니다. 모든 (좀) 작동하지만 모든 div의를 표시 할 때, 페이드 아웃 /에는

HTML (이 JSFIDDLE에서 볼 수 있습니다) ...

<button id="ab">AB</button> 
<button id="all">ALL</button> 
<hr> 
<div class="work" title="ab">AB</div> 
<div class="work" title="dc">DC</div> 
<div class="work" title="ab">AB</div> 
<div class="work" title="dc">DC</div> 

SCRIPT

$("#ab").click(function(){ 
    $(".work").fadeOut(400);  
    $(".work[title *='ab']").fadeIn(400); 
}); 

$('#all').click(function(){ 
    $(".work[title *='ab']").fadeOut(400); 
    $(".work").fadeIn(400); 
}); 

을 불쾌한 깜짝 생산

Answer 1

당신의 문제는 fadeOut과 fadeIn이 동시에 (비동기식으로) 실행되고있어서 예상치 못한 결과를 초래한다는 것입니다. 두 함수 모두 선택적 콜백을 제공하므로 fadeOut이 완료된 후에 fadeIn이 발생하도록 활용해야합니다.

예 :

$("#ab").click(function(){ 
    $(".work").fadeOut(400, function(){ 
     // This anonymous function executes after fadeOut has finished. It is provided 
     // as a callback to fadeOut. 
     $(".work[title *='ab']").fadeIn(400); 
    });  

});