JQuery的淡入淡出，並在HTML變化

Question

我有以下的Jquery的Ajax調用完成後改變元素的HTML：

$("#join").on('click', function(e) { 
     e.preventDefault(); 
     $.post('register.php', $("#registerform").serialize(), function() { 
      $('#join').html('Success!') 

     }); 
    }); 
    }); 

現在，我希望能夠有html的（'成功！ '）淡出超過3秒，暫停3秒，然後淡出將相同按鈕的html改回.html（'註冊'）

我試過了幾次迭代，但都沒有成功 - 我是遺漏了什麼？

或者操作.html時不能這樣做嗎？

謝謝！

更新

幾乎工作版本：

$("#join").on('click', function(e) { 
     e.preventDefault(); 
     $.post('register.php', $("#registerform").serialize(), function() { 
      $('#join').hide().html('Success!').fadeIn(3000, function() { 
       $(this).html('Sign Up').delay(3000).fadeIn(3000); 
      }); 

     }); 
    }); 

現在唯一的問題是，按鈕消失（我假定它是隱藏（）），但如果我刪除了.hide（ ）方法它根本不會渲染。

另外，如果光標保持在按鈕上，那麼效果將不會呈現，直到它離開按鈕。

有什麼想法？

Answer 1

$('#join').hide().html('Success!').fadeIn(3000, function() { 
    $(this).delay(3000).fadeOut(); 
}); 

編輯：

$('#join').fadeOut(400, function() { 
    $(this).html('Success').fadeIn(3000, function() { 
    $(this).fadeOut(3000, function(){ 
     $(this).html('Sign UP').fadeIn(); 
    }) 
    }) 
}); 

Answer 2

var $this = $('#join'); 
    $this.on('click', function(e) { 
     e.preventDefault(); 
     $.post('register.php', $("#registerform").serialize(), function(){ 
      $this.hide().html('Success!').fadeIn(3000,function(){ 
      setTimeout(function(){$this.fadeOut(3000).html("Sign Up");},3000); 
      }); 
     }); 
    }); 

試試這個...