Question

我有这段代码：http://jsfiddle.net/VCorreia44/G4Kjr/ 我的问题是当我点击第一个按钮启动fadeIn fadeOut效果时，但是当我点击第二个按钮时，效果不会立即停止。谢谢你的帮助。

<dt id="t1">Hello World</dt>
<button type="submit" onclick="myFunction()">...</button>
<button type="submit" onclick="Pause()">...</button>

var data_val1 = 1;
var timer;

function myFunction() {

    if (data_val1 < 1) {
        document.getElementById("t1").style.color = "#000000";
    } else {
        document.getElementById("t1").style.color = "#FF0000";
        $("#t1").fadeOut("slow").fadeIn("slow");
        timer = setTimeout('myFunction()', 1000);
    }
};

function Pause() {
    clearTimeout(timer);
}

Answer 1

不需要setTimeout() - 不要链接你的淡入淡出函数，使用回调。此外，由于您使用jQuery，您可能也可以保持一致并利用css()：

function myFunction() {
    if (data_val1 < 1) {
        $("#t1").css({color:'#000'});
    } else {
        $("#t1").css({color:'#F00'}).fadeOut("slow", function(){
            $(this).fadeIn("slow", myFunction);
        });
    }
};

并阻止褪色：

function Pause() {
    $("#t1").stop();
};

JSFiddle

Answer 2

您需要在Pause函数中添加类似的内容：

$("#t1").stop();
$("#t1").css({opacity:1});

否则动画将继续，直到动画达到完全不透明度。如果您只想将其停在当前位置，您可以$("#t1").stop();

此外，您正在使用jQuery，因此您应该将document.getElementById("t1").style.color更改为$("$t1").css({color:someColor});

的 DEMO

Fiddle

<强> HTML：

<dt id="t1">Hello World</dt>
<button class="anim-start">Start</button>
<button class="anim-stop">Stop</button>

<强> jQuery的：

function animate(){
    $("#t1").fadeOut('slow').fadeIn('slow', animate);
}

$(".anim-start").on("click", function(){
    $("#t1").css("color", "red");
    animate();
});

$(".anim-stop").on("click", function(){
    $("#t1").css("color", "").css("opacity", 1).stop(true);
});

清洁和工作！

JQuery fadeIn淡出问题

3 个答案:

的 DEMO

Fiddle