jQuery를 콜백 다음 코드는 이러한 결과를 생산해야 페이드 아웃

Question

그것은 나에게 보인다

에서 대기하지 :

mademoiselle 
madesdemoiselles 
mesdemoiselles 

: "엄마"로, 대신

mademoiselle 
demoiselle 
mesdemoiselles 

을 페이드 아웃, "MES는"순서를 만드는 페이드

코드 :

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

문제는 :이 생성 PHP 코드는 자리 표시 자로 범위를 사용하고 있습니다. 내가해야만한다면 그들을 str_replace하지만, 나는 이것이 왜 일어나고 있는지 궁금하다.

Answer 1

그래, 문제를 재현하기 위해 관리 했으므로 예제는 http://jsbin.com/ocaha을 참조하십시오.

jQuery에서 빈 <span>이 희미해질 필요가 없음을 알 수 있습니다. 따라서 애니메이션이 완료된 것으로 간주하고 예상 된 4000ms 대신 0ms 동안 실행합니다. 따라서 즉시 으로 변하며은 .adds입니다.

이 동작을 방지하기 위해 선택 항목에서 filter을 모두 비 웁니다. 이처럼 :

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