Ersetzen von Schaltfläche Text mit jQuery

Question

Haben Sie eine Schaltfläche, die ich mit SlideToggle verwenden, um divs anzuzeigen. Der Schaltflächentext ist "Teilklienteliste anzeigen" ... wenn er angeklickt wird, ändert er sich zu "Teilklienteliste ausblenden". Es funktioniert gut, aber ich frage mich, ob ich einen Übergangseffekt hinzufügen könnte, so ändert sich der Text nicht einfach abrupt beim Klicken.

JS

$(document).ready(function(){ 
    $('.show-clients').click(function() { 
    $('.more').slideToggle(400); 
    $(this).text($(this).text() == 'Show Partial Client List' ? 'Hide Partial Client List' : 'Show Partial Client List'); 
    return false; 
    }); 
}); 

Die .mehr Klasse wird auf die versteckten div mit dem Inhalt angebracht, die zeigen wird, wenn die Schaltfläche geklickt wird.

HTML

<a href="#/" class="button solid show-clients">Show Partial Client List</a> 

Answer 1

können Sie, aber so zu tun, verwenden Sie nicht den Text () Methode, um es zu aktualisieren. Sie müssen einen Container zu Ihrer Schaltfläche hinzufügen, die den Text enthält, und diesen Container ein- und ausblenden, wenn sich der Text ändert.

HTML

<a href="#/" class="button solid show-clients"><div class="fadr">Show Partial Client List</div></a> 

JS

$('.fadr').fadeOut(1000, function() { 
    $('.fadr').html("Your New Text"); 
    $('.fadr').fadeIn(); 
    }); 

Answer 2

Sie könnten .fadeIn() und .fadeOut() jQuery-Funktionen verwenden:

$(document).ready(function() { 
 
    $('.show-clients').click(function() { 
 
    //$('.more').slideToggle(400); 
 

 
    $(this).fadeOut(200, function() { 
 
     $(this).text($(this).text() == 'Show Partial Client List' ? 'Hide Partial Client List' : 'Show Partial Client List').fadeIn(200); 
 
    }); 
 

 
    return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#/" class="button solid show-clients">Show Partial Client List</a>