jqueryボタンの値がefffectsで変化する

Question

クリックするとフェード効果でボタンの値を変更したいと思います。私のコードは次のとおりです。

HTML：

<button> some value </button> 

スクリプト：

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

別のstackoverflowの答えから、私は私が$(this).find('span').html('Collapse').hide().fadeIn('slow'); でLINE1を交換し、<button> <span> some value </span> </button>にHTMLの一部を変更した場合、それが動作することがわかりました。しかし、spanタグを使用せずにjqueryを使ってトランジション効果を達成する方法はありますか？

Answer 1

このようなものが欲しいですか？

だけであなたは、ボタンのテキストプロパティを設定することができます$(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

を使用しています。あなたはフェードアウトし、それが働いたフェードイン

$(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>