悬停鼠标上未出现jQuery函数

我正在尝试为我正在开发的网站制作一个小动画，但按照我构建它的方式，当我将鼠标移到container 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>

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

---

非常感谢您的帮助或澄清

我花了一点时间重新安排JavaScript的布局，以帮助了解真正发生了什么，我想我看到了您可能缺少的内容。

setTimeout

方法返回一个值来表示正在设置的计时器。如果不捕获此值，则无法取消计时器

不要调用

setTimeout（函数（pee）…

，而是将其更改为捕获返回值，然后在

cleartimout

调用中使用该值

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

调用中定义它，并使其仍然工作。我还没有对其进行任何测试。

我建议您实践正确的方法r代码的间距和缩进有助于可读性和故障排除。我编辑了你的文章来展示我所说的内容。太棒了！这非常有效。现在唯一的东西就是“TM”div在推出后留下。我尝试创建另一个var和一个clearTimeout，但没有成功。有什么想法吗？@brock2621-不确定。在我提供的代码更新中，TM动画使用了一个新的超时函数。它看起来应该在短时间延迟后进行动画制作。我很好奇为什么会被否决。Did我错过了什么或者没有回答这个问题？w3schools在这里不是一个受人尊敬的资源。有时候，它的引用被否决了。@Sparky672-好吧，知道这个很好。我不知道我应该避免它作为一个资源。快速JavaScript语法引用非常好。你能推荐一个更好的资源吗hat有全面的语法参考？

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);
    }
);