jquery - Why is my span's text not changing? -

when user clicks on button, i'm trying child span fade out, change text, fade in, , revert original text, fading out , in once more:

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

the button fades @ correct intervals, text never changes. no errors. doing wrong?

proof, if proof needed: http://jsfiddle.net/verism/xpyhz/

you should use callback functions process after fadein or fadeout.

otherwise text("clicked") , text($text) works immediately.

$('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