Question

我有以下简单的按钮切换innerHTML文本。我一直在寻找一个缓慢淡入和淡出的转换，以便在点击时改变innerHTML，但是没有好运这样做。你能帮我解决一下我的成就吗？

提前感谢您的建议。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何使jQuery innerHTML变化的淡入和淡出过渡

2 个答案: