html 更改上的 JQuery fadeIn 和 fadeOut

Question

我有以下 Jquery Ajax 调用，完成后会更改元素的 HTML:

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

        });
    });
  });

现在，我希望能够让 .html('Success!') fadeIn 持续 3 秒以上，暂停 3 秒，然后 fadeOut 将同一按钮的 html 更改回 .html('Sign Up' )

我已经尝试了几次迭代但没有成功 - 我是否遗漏了一些东西？

或者在操作 .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())，但是如果我删除 .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();
    })
  })
});