Wie animiere ich .html() beim Klick

Question

Wenn ich auf diese Schaltfläche klicke, möchte ich die .html() animieren, damit die Breite von Expand nach Collapse weicher wird.

Hier ist meine Schaltfläche:

<a href="#" class="toggle-form">Expand</a> 

Hier ist meine Jquery:

$('.toggle-form').click(function(e) { 
    e.preventDefault(); 

    $(this).toggleClass('active'); 

    if($(this).hasClass('active')) { 
     $(this).html('Collapse'); 
    } else { 
     $(this).html('Expand'); 
    } 
}); 

Danke Jungs :)

Answer 1

Sie benötigen einen Zeitparameter zu show() und hide() als

geben

$(this).show("fast"); 

Oder

$(this).show(500); 

Mehr Dokumentation HERE

Es gibt andere Methoden Effekte CSS Übergang als auch mit.

Answer 2

Sie können .slideUp() und .slideDown() oder .animate() jQuery-Methoden verwenden, um dies zu erreichen.

Referenzen: http://api.jquery.com/slideup/, http://api.jquery.com/slidedown/, http://api.jquery.com/animate/