내 스팬의 텍스트가 변경되지 않는 이유는 무엇입니까?

Question

사용자가 버튼을 클릭 할 때 하위 스팬을 페이드 아웃하고 텍스트를 변경 한 다음 원래 텍스트로 되돌리고 다시 페이드 아웃하고 한 번 더 다시 시도합니다.

<button id="clickMe"> 
    <span>Click Me</span> 
</button> 

$('body').on('click','#clickMe',function(e){ 
    e.preventDefault(); 
    var $this = $(this); 
    var $span = $this.find('span'); 
    var $text = $span.text(); 
    $span.fadeOut(180) 
     .text('Clicked') 
     .fadeIn(180) 
     .delay(1200) 
     .fadeOut(180) 
     .text($text) 
     .fadeIn(180); 
}); 

버튼이 정확한 간격으로 사라지지만 텍스트가 변경되지 않습니다. 오류 없음. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

증명, 증거가 필요한 경우 : http://jsfiddle.net/verism/XPyHZ/ 텍스트 변경 사항이 fadeIn 같은 효과를 큐에 대기하고되지 않습니다 때문입니다

Answer 1

: 애니메이션의 콜백 매개 변수가 올바른 결과를 얻기 위해 호출을 사용합니다.

그렇지 않으면 text("Clicked") 및 text($text)이 즉시 작동합니다. 당신은 두 번()는 .text 전화하는거야

$('body').on('click','#clickMe',function(e){ 
    e.preventDefault(); 
    var $this = $(this); 
    var $span = $this.find('span'); 
    var $text = $span.text(); 
    $span.fadeOut(2000, function() { 
      $(this).text("Clicked"); 
     }) 
     .fadeIn(180) 
     .delay(1200) 
     .fadeOut(180, function() { 
      $(this).text($text) 
     }) 
     .fadeIn(180);  
}); 

DEMO

Answer 2

/페이드 아웃 기능을 수행합니다. 텍스트가 변경된 다음 다시 변경됩니다. 너무 빨리 일어나서 절대로 보지 못합니다. 최종 텍스트() 호출에서 텍스트를 원래 텍스트가 아닌 다른 텍스트로 설정하면 텍스트가 변경되는 것을 볼 수 있습니다.

해결책은 fadeIn | Out 함수에서 콜백 함수로 작업하는 것입니다.

Answer 3

.text()은 지연을 실제로 기다리지 않고 애니메이션 기능 만 지연을 고려합니다.

그래서 여기에서 텍스트가 새로운 값으로 변경되고 바로 이전 값으로 돌아갑니다. 지연을 대기하려면 fade 메서드 콜백을 사용하십시오.

$span.fadeOut(180) 
    .text('Clicked') 
    .fadeIn(180) 
    .delay(1200) 
    .fadeOut(180, function() { span.text($text) }) 
    .fadeIn(180); 

Answer 4

.text()는 .delay()의 적용을받지 않고 즉시 적용됩니다. 당신은 콜백 함수가 fadeIn 또는 페이드 아웃 후 어떤 과정을 사용해야합니다

$('body').on('click','#clickMe',function(e){ 
    e.preventDefault(); 

    var $this = $(this); 
    var $span = $this.find('span'); 
    var $text = $span.text(); 

    $span.fadeOut(180, function() { 
     $span.text('Clicked') 
      .fadeIn(180) 
      .delay(1200, function() { 
       $span.fadeOut(180, function() { 
        $span.text($text) 
         .fadeIn(180); 
       }); 
      }); 
    }); 
}); 

Answer 5

, 다음는 .text ($ 텍스트)와 초기 텍스트로 재설정 '을 클릭 함'하나;

http://jsfiddle.net/XPyHZ/3/

도움말 및 설명에 대한

$('body').on('click','#clickMe',function(e){ 
    e.preventDefault(); 
    var $this = $(this); 
    var $span = $this.find('span'); 
    var $text = $span.text(); 
    $span.fadeOut(180) 
     .text('Clicked') 
     .fadeIn(180) 
     .delay(1200) 
     .fadeOut(180) 
     .fadeIn(180); 
});