javascript - 如何进行jQuery innerHTML更改的淡入和淡出过渡

我有以下简单的按钮可以切换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>

最佳答案

这是一个潜在的解决方案，它可能会根据您要达到的效果而起作用。

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>