Question

I have the following Jquery Ajax call that upon completion changes the HTML of a element:

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

        });
    });
  });

Now, I want to be able to have the .html(‘Success!’) fadeIn over 3 seconds, pause for 3 seconds, then fadeOut to change the html of that same button back to .html(‘Sign Up’)

I’ve tried several iterations and have not been successful – am I missing something?

Or can this not be done when manipulating the .html ?

Thanks!

Update

Almost working version:

  $("#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);
            });

        });
    });

The only problem now is that the button disappears (I’m assuming it’s the hide()) but if I remove the .hide() method it won’t render at all.

Also, if the cursor remains on the button the effect won’t render at all until it is moved away from the button.

Any thoughts?

Answer 1

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

Edit:

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