2

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

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

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

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

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

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

4

2 回答 2

2

我是jQuery hoverIntent 插件的忠实粉丝。

这是一个小提琴实现。

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

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);
于 2012-11-27T17:43:21.103 回答
1

解决方案示例：http: //jsfiddle.net/Rh96d/8/

在这里，您正在设置一个函数，一旦经过 500 毫秒就会触发。一旦鼠标离开该区域，关闭动画代码就会运行。

JavaScript

var myTimeout;
$('#main').mouseenter(function() {
    myTimeout = setTimeout(function() {
        $('#one').stop().delay(600).animate({marginTop:'-250px'});
        $('#two').stop().delay(600).animate({marginTop:'500px'});
        },function () {
    }, 5500);
}).mouseleave(function() {
    clearTimeout(myTimeout);
    $('#one').stop().animate({marginTop:'0px'});
    $('#two').stop().animate({marginTop:'0px'});
});

$('#main').mouseleave(function() {
    clearTimeout(myTimeout);
    $('#one').stop().animate({marginTop:'0px'});
    $('#two').stop().animate({marginTop:'0px'});
});​

​</p>

于 2012-11-27T17:41:27.917 回答