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>