jquery button value change mit efffects

Question

Ich möchte den Wert der Schaltfläche mit Fading-Effekt ändern, wenn ich darauf klicke. Mein Code ist:

html:

<button> some value </button> 

Skript:

$(document).ready(function(){ 
    $("#btn_1").click(function(){ 
     $(this).prop('value', "new value!"); // line1 
    }); 
}); 

Aus einer anderen Stackoverflow Antwort fand ich, dass, wenn ich line1 ersetzen mit $(this).find('span').html('Collapse').hide().fadeIn('slow'); und ändern Sie den HTML-Teil zu <button> <span> some value </span> </button> es funktioniert . Gibt es jedoch eine Möglichkeit, den Übergangseffekt mit jQuery zu erreichen, ohne Span-Tags zu verwenden?

Answer 1

Wollen Sie so etwas?

nur $(this).text('new value!').hide().fadeIn('slow');

$(document).ready(function() { 
 
    $("#btn_1").click(function() { 
 
    $(this).text('new value!').hide().fadeIn('slow'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btn_1"> some value </button>

Answer 2

verwenden Sie Eigenschaft text-Taste einstellen. und Sie können Fadeout und fadeIn

$(document).ready(function(){ 
 
    $("#btn_1").click(function(){ 
 
     
 
      $(this).text("You Clicked").fadeOut().fadeIn(); 
 
      
 
      
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btn_1">Click HERE</button>