如何進行jQuery innerHTML更改的淡入和淡出過渡

Question

我有以下簡單的按鈕可以切換innerHTML文本。 我一直在尋找一個緩慢的淡入和淡出過渡，以實現單擊時更改innerHTML的效果，但是這樣做並沒有好運。 您能幫我實現這個目標嗎？

預先感謝您的建議。

 var Chg; var Btn = document.getElementById("change"); $("#change").click(function() { Chg = !Chg; if (Chg) { Btn.innerHTML = "Toggled"; } else { Btn.innerHTML = "Not Toggled"; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="change">Not Toogled</button> 

Answer 1

這是一個潛在的解決方案，它可能會根據您要達到的效果而起作用。

 var Chg; $("#change").click(function() { Chg = !Chg; var text; if (Chg) { text = "Toggled"; } else { text = "Not Toggled"; } $(this).fadeOut("fast", function() { this.innerHTML = text; $(this).fadeIn("fast"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="change">Not Toggled</button> 

Answer 2

 $("#change").on('click',function() { var $this=$(this); var x,x1; if($this.attr("data-Toggle")=="0"){ x="span:first-child"; x1="span:last-child"; $this.attr("data-Toggle","1"); } else{ x="span:last-child"; x1="span:first-child"; $this.attr("data-Toggle","0"); } $this.find(x).fadeToggle(500); setTimeout(function(){ $this.find(x1).fadeToggle(); }, 500); }); 

 button{width:100px;height:20px;} button span:last-child{display:none} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button data-Toggle="0" id="change"> <span>Not Toggled</span> <span>Toggled</span> </button>