1

我正在开发一个包含大量可悬停 div 的项目。我写了一个动画来做到这一点：

在鼠标悬停时，图像淡出，作为回调，包含信息的 div 淡入。然后在鼠标移出时，信息 div 淡出，作为回调，图像淡入。我正在使用 hoverIntent 插件。

我的问题是，如果您在 div 上停留足够长的时间，一切都会正常工作。但是如果你在它上面停留 300 毫秒，动画就会停止，但仍然会调用显示信息 div 的回调，忽略鼠标移出事件。这导致信息 div 永久保留...

这是我的代码：

 var infoPaneSettings = {
    sensitivity: 3,
    interval: 200,
    timeout: 500,
    over: showPane,
    out: hidePane

    }   

function showPane() {
    var entry = $(this);
    $('.featured_img', entry).fadeTo(1000, 0, 
        function(){
        $('.infoPane', entry).fadeTo(200, 1);
        });


}

function hidePane() {
    var entry = $(this);
    $('.infoPane', entry).fadeTo(300, 0, 
        function(){
        $('.featured_img', entry).fadeTo(200, 1);
        });
}

$('.entry').each(function(){
    $(this).hoverIntent(infoPaneSettings);
});

我希望你能帮帮我 ！

4

1 回答 1

4

在开始新动画之前在元素上使用http://api.jquery.com/stop/ 。它将阻止运行回调。

于 2011-09-16T09:24:20.023 回答