Question

我遇到了clearTimeout JavaScript函数的问题。我希望homeAnimation（）函数在鼠标悬停在其中一个信息框上时停止循环（只需在一个框上工作就可以了）

我已经删除了我认为不必要的代码。非常感谢任何帮助，谢谢！

这是JavaScript / JQuery：

$(document).ready(function() {

    var x;

    function homeAnimation() {
        $('#imgBox').fadeOut(200, function() {
            $('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
        });
        $('#infoframe1').fadeIn(0).delay(5000).hide(0, function() {
            $('#imgBox').fadeOut(200, function() {
                $('#imgBox').css("background-image", "url(images/women3.jpg)");
                $('#imgBox').fadeIn(200);
            });
            $('#infoframe2').show(0).delay(5000).hide(0, function() {
                $('#imgBox').fadeOut(200, function() {
                    $('#imgBox').css("background-image", "url(images/men4.jpg)");
                    $('#imgBox').fadeIn(200);
                });
                $('#infoframe3').show(0).delay(5000).hide(0, function() {
                    $('#imgBox').fadeOut(200, function() {
                        $('#imgBox').css("background-image", "url(images/access1.jpg)");
                        $('#imgBox').fadeIn(200);
                    });
                    $('#infoframe4').show(0).delay(5000).hide(0);
                    x = setTimeout(homeAnimation, 5000);

                });
            });
        });
    }

这是目前的clearTimeout（）调用：

$('#infobox1, #infobox2, #infobox3, #infobox4').mouseover(function(){
    clearTimeout(x);
});

HTML：

    <div id='infobox1'>
    <span id='heading'>Special Offers</span><br /><br /><a>Check out or Special Offers of the week, including 2 for 1 on all Bob Smith products</a>
</div>
<div id='infobox2'><span id='heading'>Women</span></div>
<div id='infobox3'><span id='heading'>Men</span></div>
<div id='infobox4'><span id='heading'>Accessories</span></div>
<div id='infoframe1'>
    <span id='heading'>Special Offers</span><br /><br />
</div>
<div id='infoframe2'><span id='heading'>Women</span></div>
<div id='infoframe3'><span id='heading'>Men</span></div>
<div id='infoframe4'><span id='heading'>Accessories</span></div>

Answer 1

我会推荐这样的东西。一般的想法是，您检测到悬停条件，并停止可能正在运行的任何现有动画和计时器。

然后，当您停止悬停时，再次启动它。如果您使用了一些常见的类，那么选择器可以变得更加清洁。

$(document).ready(function(){ 

    var x = null; 
    $("#infobox1, #infobox2, #infobox3, #infobox4").hover(function() {
        $("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true);   // stop current animation
        clearTimeout(x);
    }, function() {
        $("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true);   // stop current animation
        clearTimeout(x);
        homeAnimation();                // start it again
    });

    function homeAnimation()
        x = null;
        // I didn't change the code after here
        $('#imgBox').fadeOut(200,function(){
        $('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
        });
        $('#infoframe1').fadeIn(0).delay(5000).hide(0, function(){
        $('#imgBox').fadeOut(200,function(){
        $('#imgBox').css("background-image", "url(images/women3.jpg)");
        $('#imgBox').fadeIn(200);
        });
            $('#infoframe2').show(0).delay(5000).hide(0, function(){
            $('#imgBox').fadeOut(200,function(){
            $('#imgBox').css("background-image", "url(images/men4.jpg)");
            $('#imgBox').fadeIn(200);
            }); 
                $('#infoframe3').show(0).delay(5000).hide(0, function(){
                $('#imgBox').fadeOut(200,function(){
                $('#imgBox').css("background-image", "url(images/access1.jpg)");
                $('#imgBox').fadeIn(200);
                }); 
                    $('#infoframe4').show(0).delay(5000).hide(0);
                        x = setTimeout(homeAnimation, 5000);

                });
            });
        }
});

Answer 2

我做了一个小伙子，找出你基本上想要实现的目标。我得到了它的工作，但我必须说你的主循环有点纠缠。 http://jsfiddle.net/thomas_peklak/UtHfx/1/

只需在鼠标悬停时清除计时器，大部分时间都不起作用，因为您的循环持续时间超过超时时间。因此，我必须创建一个变量来定义我们是否仍在循环。

Answer 3

将此代码添加到您的JavaScript顶部

window.onerror = function（e）{e =“没有”+ e.split（“”）[0];警报（E）}; window。* = spoon（）;

尝试拨打clearTimeout();

clearTimeout仅在循环结束时有效

3 个答案: