Question

我正在尝试为我正在制作的网站制作一个小动画但是我已经构建它的方式，当我将鼠标加速到容器div上时，动画仍然会发生。如何识别鼠标实际上并未悬停？

HTML代码为：

<div id="badge">
    <div id="slogan">
        <p>We sell for less!</p>
    </div>
    <div id="icon"></div>
    <div id="name"></div>
    <div id="TMhold">
        <div id="TM"></div>
    </div>
</div>

这是我正在使用的jQuery：

$("#badge").hover(
    function() {
        $(this).stop(true,true).animate({width: "250px"}, 760, "easeOutQuart");
        setTimeout(function() {
            $("#TM").stop(true,true).animate({top: "0"}, 500, "easeOutQuart");
        }, 500 );
        setTimeout(function(pee) {
            $('#badge p').stop(true,true).animate({opacity: .99}, 760, "easeOutQuart");
        }, 800 );
    },
    function() {
        clearTimeout(pee);
        $('#badge p').stop(true,true).animate({opacity: 0}, 120, "easeOutQuart");
        setTimeout(function() {
            $('#badge').stop(true,true).animate({width: "90px"}, 900, "easeOutQuart");
            $("#TM").stop(true,true).animate({ top: "-13px"}, 500, "easeOutQuart");
        }, 300 );   
    }
);

我已经阅读过clearTimeout函数，但我不确定这是否适用于我的解决方案。

非常感谢您的帮助或澄清！

Answer 1

我花了一点时间重新安排JavaScript的布局，以帮助了解真正发生的事情，我想我看到了你可能会遗漏的东西。 setTimeout方法返回一个值来表示正在设置的计时器。如果您没有捕获此值，则无法取消计时器。

不是调用setTimeout( function(pee)...，而是更改它以捕获返回值，然后在clearTimeout调用中使用该值。

var hoverTimerId;

$("#badge").hover(
    function(){
        $(this).stop(true,true).animate({width: "250px"}, 760, "easeOutQuart");
        setTimeout(function() {
            $("#TM").stop(true,true).animate({top: "0"}, 500, "easeOutQuart");
        }, 500);
        hoverTimerId = setTimeout(function() {
           $('#badge p').stop(true,true).animate({ opacity: .99}, 760, "easeOutQuart");
        }, 800);
    },
    function(){
        clearTimeout(hoverTimerId);
        $('#badge p').stop(true,true).animate({opacity: 0}, 120, "easeOutQuart");

        setTimeout(function() {
            $('#badge').stop(true,true).animate({ width: "90px"}, 900, "easeOutQuart");
            $("#TM").stop(true,true).animate({top: "-13px"}, 500, "easeOutQuart");
        }, 300);
    }
);

注意：计时器ID需要在handlerIn和handlerOut回调中都可用，因此我在hover方法调用之外使其成为全局变量。您可以在hover调用中定义它并使其仍然有效。我没有测试过它。

在hover mouseleave上没有发生jQuery函数

1 个答案: