JQuery fadeIn și fadeOut pe html schimbare

Am următorul apel jQuery Ajax care la finalizarea modificărilor HTML a unui element:

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

        });
    });
  });

Acum, vreau să fiu în faza ".HTML" ("Succes!") Peste 3 secunde, pauză timp de 3 secunde, apoi fadeOut pentru a modifica html-ul aceluiași buton înapoi la .html ("Înscrieți-vă"

Am incercat mai multe iteratii si nu am avut succes - imi lipseste ceva?

Sau nu se poate face acest lucru atunci când se manipulează .html?

Mulțumiri!

Actualizare

Versiune aproape de lucru:

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

        });
    });

Singura problemă acum este că butonul dispare (presupun că este ascunderea ()) dar dacă șterg metoda .hide (), nu se va face deloc.

De asemenea, în cazul în care cursorul rămâne pe buton, efectul nu va fi afișat deloc până când nu se îndepărtează de buton.

Orice gânduri?

1

2 răspunsuri

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

Editați | ×:

$('#join').fadeOut(400, function() {
  $(this).html('Success').fadeIn(3000, function() {
    $(this).fadeOut(3000, function(){
      $(this).html('Sign UP').fadeIn();
    })
  })
});
4
adăugat
Acest lucru funcționează, dar butonul se estompează complet și trebuie să îl modific. Am revizuirea de mai sus. Noua problemă este că, dacă cursorul se află pe buton, efectul nu se va face?
adăugat autor Dustin James, sursa
Frumos, ești un profesionist! Multumesc foarte mult :)
adăugat autor Dustin James, sursa
@DustinJames Încercați versiunea de editare.
adăugat autor xdazz, sursa
@DustinJames Mă bucur să vă ajut ~
adăugat autor xdazz, sursa
  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);
          });
      });
  });

Dă-o o încercare ...

0
adăugat