终止悬停时的jQuery淡入淡出效果答案

【问题标题】：Terminate jquery fade effect on hover终止悬停时的jQuery淡入淡出效果
【发布时间】：2012-03-10 07:52:08
【问题描述】：

我正在尝试构建这种 div 连续淡入淡出的效果。棘手的地方是我需要在悬停时停止淡入和淡出效果。

现在，我拥有的这段代码并没有停止迅速消失。我需要的是一个覆盖？这可能吗？

function animate() {
    $("#bill-items-one").fadeIn(3000);

    one = setInterval(function(){
        $("#bill-items-one").fadeOut(3000);
        $("#bill-items-one").fadeIn(3000);
    }, 6000)

    two = setInterval(function(){
        $("#bill-items-two").fadeIn(3000);
        $("#bill-items-two").fadeOut(3500);
    }, 6500)

    three = setInterval(function(){
        $("#bill-items-three").fadeIn(2000);
        $("#bill-items-three").fadeOut(4000);
    }, 6000)

    four = setInterval(function(){
        $("#bill-items-four").fadeIn(3500);
        $("#bill-items-four").fadeOut(3000);
    }, 6500)
}

animate();

$(".bill-area").hover(
    function(){
        clearInterval(one);
        clearInterval(two);
        clearInterval(three);
        clearInterval(four);
        $(".bill-item").fadeOut("fast");
    },
    function(){
        animate();
    }
);

另见此链接：http://jsfiddle.net/bKKE6/

【问题讨论】：

你看过api.jquery.com/stop吗？

标签： javascript jquery jquery-ui fade

【解决方案1】：

http://api.jquery.com/stop/

$(".bill-item").stop().fadeOut("fast");

【讨论】：

【解决方案2】：

你需要stop[docs]:

$(".bill-area").hover(
    function(){
        $(".bill-item").stop(true, true).fadeOut("fast");
    },
    function(){
        animate();
    }
);

See demo

【讨论】：

【解决方案3】：

使用 jQuery 的 .stop() 停止动画。

http://api.jquery.com/stop/

【讨论】：