Javascript jQuery在鼠标停止时启动悬停动画

因此，我有一个滑动门样式的动画，现在当鼠标悬停在盒子上时，它就会触发（下面提供了我的示例）。当鼠标悬停在div上时，它不会立即启动，我实际上希望只有当鼠标停在div上时，才会出现悬停动画，就像在chromewebstore中，当鼠标停在一个应用程序容器上时一样(https://chrome.google.com/webstore/category/home)

我现在的例子

编辑：为了进一步澄清，此页面上会出现多个单元格

---

谢谢你能提供的任何帮助

我的建议是更改悬停事件。悬停时，获取鼠标坐标，然后开始超时，可能为50-100ms。使用超时将当前鼠标坐标与原始坐标集进行比较。如果它们相同，并且尚未执行动画，则执行动画。这只是一个粗略的想法，你可以尝试什么

---

编辑：还记得制作一个鼠标离开事件来停止超时。

您可以尝试jquery的hoverintent插件

---

我会这样做。。。更简单：简单明了：

$('.smallCell.slidedown').hover(function() {
    $(".overlay", this).delay(1000).queue(function(){
    $(this).animate({
        top: '-260px'
    }, {
        queue: false,
        duration: 300
    });


    });
}, function() {
    $(".overlay", this).animate({
        top: '0px'
    }, {
        queue: false,
        duration: 300
    });
});

---

这也是不言自明的：它将延迟1秒，并对函数进行排队。

您可以使用setTimeout，并与存储的元素“悬停状态”进行比较。 如果使用多个单元格，我的示例可能不是存储悬停状态的最佳方法，但这个概念仍然有效

var TIME_UNTIL_SLIDE = 1000;

var isHovering = false;
var hovertimer;

$('.smallCell.slidedown').hover(function() {
    isHovering = true;
    var $this = this;
    hovertimer = setTimeout(function(){
        if(isHovering) {
             $(".overlay", $this).stop().animate({
                top: '-260px'
            }, {
                queue: false,
                duration: 300
            });
        }
    }, TIME_UNTIL_SLIDE);

}, function() {
    isHovering = false;
    $(".overlay", this).stop().animate({
        top: '0px'
    }, {
        queue: false,
        duration: 300
    });
});

如图所示：

---

也许你应该试试这个插件：

---

易于使用，示例就在这里

看看这把小提琴，它很容易使用：

---

这对你有好处吗？你所做的只是引入一秒钟的延迟。如果我将鼠标移到div上，然后退出几次，会发生什么？OP想在鼠标停止移动时触发动画。upz，我的坏！再读一遍，你是对的。这不会像他想要的那样起作用=（“悬停意图”应该做的诀窍。感谢所有的答案，伙计们，巨大的帮助！所有这些看起来都是很好的方法。去和他们一起玩，看看结果如何。一旦我选择了答案，我一定会记下答案。再次感谢！非常棒的建议，我有一种感觉，我可能会选择这个。最后我选择了这个。斯穆特成功了有多个单元格的hest。很好的建议唯一的问题是，它在1秒后仍会发射。我需要它一直保持到鼠标完全停止移动。很好的建议！这一个实际上可能就是我要用的那个，看起来它会完全满足我的需要，不会增加太多的负担。尽管我希望避免使用plug-in.hmmm我尝试了这个，但它不起作用，你看到哪里有问题了吗？对不起，我没有检查我的邮件。是的，我可能会尝试实现这个，在我测试了一些提到的插件之后。不过这似乎是一个非常聪明的方法，因为我诚实地希望避免使用插件。