3

所以我有一个滑动门风格的动画，当鼠标悬停在盒子上时它会触发（下面提供了我的示例）。而不是当鼠标悬停在 div 上时立即触发我实际上希望悬停动画仅在鼠标停在 div 上时发生，就像它在 chrome 网上商店中将鼠标停在一个应用程序容器上时所做的那样（https://chrome.google.com/webstore/category/home）

我当前的示例 http://jsfiddle.net/fvXgK/

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

感谢您的任何帮助，您可以提供！！

4

6 回答 6

3

My advice is to change your hover event. On hover get the mouse coordinates then start a timeout with maybe 50-100ms. Use the timeout to compare the current mouse coordinates with the original set of coordinates. If they are the same, and your animation has not been executed, then do the animation. This is just a rough idea of what you could try.

Edit: Also remember to make an on mouse out event that stops the timeout.

于 2012-07-24T16:02:49.193 回答
3

你可以试试jquery的hoverintent插件。

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

于 2012-07-24T16:04:29.317 回答
2

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

http://jsfiddle.net/pbaXa/

于 2012-07-24T16:28:02.357 回答
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
    });
});

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

于 2012-07-24T16:15:35.890 回答
1

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

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

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

于 2012-07-24T16:20:10.617 回答
1

这就是我会做的......它更容易：简单明了：

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

于 2012-07-24T16:09:38.970 回答