如果在jQuery中停止动画,如何防止回调?

时间:2011-09-16 09:20:53

标签: jquery animation hover hoverintent

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

在鼠标悬停时,图像淡出,作为回调,包含信息的div淡入。然后在鼠标输出时,info 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);
});

我希望你能帮助我!

1 个答案:

答案 0 :(得分:4)

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