jquery按鈕值隨着效果變化

Question

我想改變按鈕的值與衰落效果，當我點擊它。我的代碼是：

HTML：

<button> some value </button> 

腳本：

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

從另一個計算器的答案，我發現，如果我有$(this).find('span').html('Collapse').hide().fadeIn('slow'); 取代一號線和改變HTML部分<button> <span> some value </span> </button>它的工作原理。然而，有沒有一種方法可以在不使用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

可以設置按鈕的Text屬性。你可以淡出和淡入

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