1

我有以下 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() 方法，它根本不会呈现。

此外，如果光标停留在按钮上，则效果根本不会呈现，直到它从按钮上移开。

有什么想法吗？

4

2 回答 2

5 
$('#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();
    })
  })
});
于 2012-05-31T01:29:23.010 回答
0 
  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);
          });
      });
  });

试试这个...

于 2012-05-31T01:29:27.957 回答