javascript - 如何使 jQuery insideHTML 变化淡入淡出过渡

Question

我有以下简单的按钮，可以切换 insideHTML 文本。我一直在寻找一个缓慢的淡入和淡出过渡来改变点击时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>