jquery按鈕內容更改並再次返回

Question

我試圖實現簡單的按鈕按鈕反饋以快速淡出按鈕，更改其類和內容，淡入然後做反向回到其原始狀態。

這是我認爲會相當簡單的代碼。

$('#event1-btn-451').fadeOut(200).toggleClass('btn-primary btn-success').html('Success!').fadeIn(200); 
$('#event1-btn-451').delay(2000).fadeOut(200).toggleClass('btn-success btn-primary').html('Add Event').fadeIn(200); 

通過自身的第一線工作正常，但如果我有第二行所做的只是淡出，淡入相同的「添加事件」按鈕與原來的顏色，然後在2秒後，再次做同樣的事情延遲。

JSFIDDLE

第一次真正在這裏發帖，雖然當然像許多我用這個對於已經這麼多的答案！

Answer 1

這種動畫必須鏈接，就像這樣：

jsFiddle

$('#event1-btn-451').click(function() { 
    $(this).fadeOut(200, function(){ 
     $(this).toggleClass('btn-primary btn-success') 
      .html('Success!') 
      .fadeIn(200) // No need to chain as there is a delay then 
      .delay(2000) 
      .fadeOut(200, function(){ 
       $(this).toggleClass('btn-success btn-primary') 
        .html('Add Event') 
        .fadeIn(200); 
      }) 
     }) 
}); 

Answer 2

我會用jQuery animate方法代替它。這裏覆蓋了這個。

Change text (html) with .animate

Answer 3

請試試這個：jQuery的的

$('#event1-btn-451').click(function() { 
    var _this = $(this); 
    _this.fadeOut(200, function() { 
     _this.toggleClass('btn-primary btn-success').html('Success!').fadeIn(200).delay(2000).fadeOut(200, function() { 
      console.log('c'); 
      _this.toggleClass('btn-success btn-primary').html('Add Event').fadeIn(200); 
     }) 
    }); 
}); 

使用callback function​​