如何使jQuery innerHTML的淡入和淡出过渡更改

Question

我有以下简单的按钮来切换内部HTML文本。我一直在寻找一个缓慢的淡入和淡出过渡，以便在单击时更改内部 HTML，但运气不佳。你能帮我解决如何实现这一目标吗？

提前感谢您的建议。

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>