html 更改时的 JQuery 淡入和淡出

Question

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

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

        });
    });
  });

现在，我希望能够让 .html('Success!') 淡入淡出超过 3 秒，暂停 3 秒，然后淡出将同一按钮的 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();
    })
  })
});