当鼠标停止移动时，jQuery启动悬停动画

Question

所以我有一个滑动门式动画，目前是当鼠标悬停在盒子上时触发（我的示例如下所示）。与其在鼠标悬停在div上立即触发，我实际上希望悬停动画仅在鼠标停留在div上时发生，就像在Chrome Web Store中停止鼠标在一个应用程序容器上时一样（https://chrome.google.com/webstore/category/home）。

我的当前示例 http://jsfiddle.net/fvXgK/ 编辑：为了进一步澄清，此页面上将出现多个单元格。

感谢您提供的任何帮助！！

- Stavros_S

---

这个对你有用吗？http://www.jquery4u.com/events/writing-mousestop-event-plugin-jquery/#.UA7GO6AcvAk - Billy Moat

Answer 1

我的建议是更改您的hover事件。在悬停时获取鼠标坐标，然后开始一个50-100毫秒的计时器。使用计时器将当前鼠标坐标与原始坐标进行比较。如果它们相同，并且尚未执行动画，则执行动画。这只是您可以尝试的大体想法。 编辑：还要记得制作一个on mouse out事件来停止计时器。

- hradac

---

是的，我可能会尝试实现这个功能，在测试一些提到的插件之后。虽然我想避免使用插件，但这似乎是一个非常聪明的方法。 - Stavros_S

Answer 2

你可以尝试使用jQuery的hoverintent插件。 http://cherne.net/brian/resources/jquery.hoverIntent.html

- Karan Punamiya

---

这个建议棒极了，我感觉可能会采纳它。 - Stavros_S

最后采用了这个方案。在处理多个单元格时运行最流畅。 - Stavros_S

Answer 3

看这个fiddle，易于使用:

http://jsfiddle.net/pbaXa/

- Novak

---

很好的建议，唯一的问题是它仍然会在1秒后触发。我需要它等到鼠标完全停止移动才能触发。 - Stavros_S

Answer 4

这是我会做的方式...它更简单：简单明了：

$('.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秒并将您的函数排队。

- rafaelbiten

---

你所做的只是引入了一秒的延迟。如果我将鼠标移动到div上，然后多次移出，会发生什么？OP希望在鼠标停止移动时触发动画。 - j08691

抱歉，我的错！我再次阅读了一遍，你是对的。这不会按照他想要的方式工作 =( "hover intent" 应该可以解决问题。 - rafaelbiten

Answer 5

你可以使用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
    });
});

显示在： http://jsfiddle.net/fvXgK/16/

- Ben

---

谢谢大家的回答，非常有帮助！所有的方法都看起来很不错。我会试着用其中几个并看看效果如何。一旦我选择了答案，我会确保标记它。再次感谢！ - Stavros_S

Answer 6

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

http://www.richardscarrott.co.uk/posts/view/jquery-mousestop-event

易于使用，示例就在那儿！

- skywlkr

---

很好的建议！这个看起来可能是我要选择的，它似乎能够完全满足我的需求，而不会增加太多负担。虽然我希望避免使用插件。 - Stavros_S

嗯，我尝试了一下，但好像不起作用，你看到哪里有问题了吗？http://jsfiddle.net/fvXgK/ - Stavros_S

抱歉，我没有查看我的邮件。 - skywlkr