Question

所以我有一个滑动门式动画，当鼠标悬停在盒子上时，它现在会触发（我的例子在下面提供）。当鼠标悬停在div上时，我实际上希望悬停动画只在鼠标停在div上时发生，而不是在鼠标停留在div上时发生，就像当你在其中一个app容器上停止鼠标时在chrome web商店中那样（https://chrome.google.com/webstore/category/home）

我目前的例子 http://jsfiddle.net/fvXgK/

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

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

Answer 1

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

编辑：还记得制作一个停止超时的鼠标输出事件。

Answer 2

您可以尝试使用jquery的hoverintent插件。

http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 3

看到这个小提琴，易于使用：

http://jsfiddle.net/pbaXa/

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秒并排队你的功能。

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/

Answer 6

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

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

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

当鼠标停止时，jQuery开始悬停动画

6 个答案: