jQuery 콜백은 페이드 아웃에서 기다리지 않습니다

Question

다음 코드는 다음과 같은 결과를 생성해야합니다.

mademoiselle
demoiselle
mesdemoiselles

대신, "ma"가 사라지면 "Mes"는 시퀀스를 만드는 데 사라집니다.

mademoiselle
madesdemoiselles
mesdemoiselles

코드:

<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="add">s</span>

$(document).ready(function() {
   $(".remove").fadeOut(4000,function(){
       $(".add").fadeIn(5000);      
   });
});

편집 : 제거하면 버그가 사라지는 빈 스팬을 발견했습니다.

<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="remove"></span><span class="add">s</span>

문제는 다음과 같습니다. 내가해야한다면 str_replace 할 것입니다. 그러나 왜 이런 일이 일어나고 있는지 궁금합니다.

Answer 1

좋아, 그래서 나는 당신의 문제를 재현 할 수있었습니다. http://jsbin.com/ocaha.

일어나는 일은 jQuery가 비어있는 것을 볼 수 있다는 것입니다. <span> 사라질 필요는 없습니다. 따라서 완료된 애니메이션을 고려하고 예상 4000ms 대신 0ms를 실행합니다. 그래서 그것은 즉시 사라지기 시작합니다 모두 의 .adds.

이 행동을 막기 위해 나는 할 것이다 필터 선택에서 모든 빈 요소를 멀리하십시오. 이와 같이:

$(document).ready(function() {
   $(".remove")
               .filter(function(){ return ! $(this).is(":empty"); })
               .fadeOut(4000, function(){
     $(".add").fadeIn(5000);
   });
});

작업 예제를 참조하십시오 http://jsbin.com/ovivi.

Answer 2

변화 ":비어 있는" 에게 ":숨겨진"작동하지 않는 경우 :

$(document).ready(function() {
   $(".remove")
               .filter(function(){ return ! $(this).is(":hidden"); })
               .fadeOut(4000, function(){
     $(".add").fadeIn(5000);
   });
});