클래스에 대한 jquery FadeOut, 동시 실행 대신 여러 번 실행, y? 기본적으로</p> <p>모두가 표시됩니다 :

Question

내가 좋아하는 여러 div가있는 페이지가 없음을, 나는 어떤 카드를 제시 할 수있는 사용자가 클릭을 할 수 있습니다.

사용자가 나는 다음과 같은 jQuery를 운영하는 카드로드를 클릭 할 때마다 :

$('.carditem').fadeOut(function() {alert(1) 
// Animation complete show correct card 
$('#' + toogleID).fadeIn(); 
}); 

나에게 놀라운 무슨 경고가 위의 5 배, 아니 1 시간이 일어나고 있다는 것입니다. 의미는 fadeOut은 동시에 실행되지 않지만 모든 카드 항목을 반복합니다. 이것은 깜박 거리는 추악한 애니메이션을 만듭니다. 일치하는 모든 클래스가 동시에 실행되도록 fadeout을 얻으려면 어떻게해야합니까? 또는 디스플레이하는 div가있는 클래스에서 실행하십시오. 단 하나의 카드 여야합니까?

감사합니다.

Answer 1

당신은 애니메이션 (오프셋 시작의 원인)를 중지하는 경고를 가지고가는 경우에 예상대로 동시 인 :

$('.carditem:visible').fadeOut(function() { 
    $('#' + toogleID).fadeIn(); 
}); 

각 요소를 적어도 초기 애니메이션의 관점에서, 행동거야

$('.carditem:visible').fadeOut(function() { 
    if(!$('.carditem').is(':animated')) //are any still animating? 
    $('#' + toogleID).fadeIn(); 
}); 

0 : 당신이 .fadeIn() 어떤 여전히 .is()과 :animated selector와 애니메이션을하는 경우 다음과 같이 확인 후, 그들의 마지막 한 후 발생 할 경우 는 독립적으로 애니메이션을한다

:visible 셀렉터에 추가 된 것은 모두 표시/페이딩되지 않고 페이드 아웃되는 것입니다.