Question

我有下面的代码块。它经历一个循环，通过循环改变背景位置。当我徘徊时，我试图阻止循环。我目前正在尝试使用布尔值hoveredOut来执行此操作，当调用OutHandler的{{1}}时，该值变为true。然而，HoveredOut仍然是真的，循环总是完成。现在它也总是停留在最后，永远不会重置为0。

所以我的问题：

我接近这个吗？我应该做些什么而不是我现在用hover()做的事吗？它现在似乎没有用。
当我没有在hoveredOut上空盘旋时，为什么循环没有停止？
当我将鼠标悬停在它上面时，为什么循环没有重置？当我注释掉整个.headerGif块时，会重置，但我需要它来处理hoveredOut检查。

希望你们能看出问题所在。

if(hoveredOut)

Answer 1

要创建此类循环，您应该使用setInterval，并使用clearInterval停止它。

以下代码和fiddle

#container {
    background: gray;
    width: 200px;
    height: 200px;
    text-align: center;
    padding-top: 40px;
}
#container.hovering {
    background: green;
}
<div id="container"></div>

var ticker = 0;
var looper = false;
var tick_function = function() {
    ticker++;
    $("#container").text("ticker:"+ticker);
}
$(document).ready(function() {
    $("#container").hover(function() {
        $("#container").addClass("hovering");
        looper = setInterval(function() {
            tick_function();
        }, 500);
    }, function() {
        $("#container").removeClass("hovering");
        clearInterval(looper);
    });   
});

如果语句没有停止循环

1 个答案: