jquery 滑动/计时问题

Question

所以我设置了一个小的 jquery 动画，用户将鼠标悬停在容器上一段时间，这会导致容器 split ，然后显示内部信息。

我不希望鼠标一进入容器就开始动画，所以我在动画上放了一个delay()。现在动画不会立即开始。

但是，有一个问题。如果您快速将鼠标悬停在该区域上，动画就会开始并且开始得非常快。

这里有一个 jsfiddle 来说明... http://jsfiddle.net/Rh96d/

我不希望播放动画，除非用户将鼠标悬停在蓝色区域上一定时间。在此示例中，即使用户将鼠标从该区域移开，动画也会播放，这是不应该发生的。

对不起，如果我不够清楚。我不确定如何让它工作...

Answer 1

我非常喜欢 jQuery hoverIntent plugin .

这是一个 fiddle implementation .

包含插件后，您的脚本将更改为

function hoverIn () {
    $('#one').stop().animate({marginTop:'-250px'});
    $('#two').stop().animate({marginTop:'500px'});
}
function hoverOut () {
    $('#one').stop().animate({marginTop:'0px'});
    $('#two').stop().animate({marginTop:'0px'});
}
var config = {
    over: hoverIn,
    timeout: 0,
    out: hoverOut,
    interval: 600
};

$('#main').hoverIntent(config);