jquery mouseover mouseout答案

【问题标题】：jquery mouseover mouseoutjquery mouseover mouseout
【发布时间】：2011-06-01 09:36:44
【问题描述】：

$('.rollover').mouseover(function(e){

        e.stopPropagation();

        thisName = $(this).attr('title');

        $('li#'+thisName).show(50, 'swing');

    });


    $('.rollover').mouseout(function(e){

        e.stopPropagation();                    

        thisName = $(this).attr('title');

        $('li#'+thisName).hide(50, 'swing');

    });

我有四张带有“rollover”类的图片，所以当鼠标移过每张图片时，会显示一个与图片标题共享其 id 的列表项，而当鼠标离开时，列表项会隐藏。

我的问题是图像非常靠近，如果鼠标进入和离开太快，它看起来就像列表项在闪烁。我更喜欢它，以便鼠标悬停动画必须在下一个鼠标悬停动画开始之前完成，反之亦然。

我该怎么做？

JS FIDDLE@http://jsfiddle.net/callumander/XhpuT/

【问题讨论】：

在jsFiddle上放一个完整的例子

标签： jquery mouseover mouseout

【解决方案1】：

与其通过在用户查看新内容之前完成每个动画来减慢速度，不如使用Hover Intent plugin 之类的东西来防止“意外”鼠标悬停？

【讨论】：

【解决方案2】：

尝试使用.queue（未经测试）：

$('.rollover').mouseover(function(e){
    e.stopPropagation();
    thisName = $(this).attr('title');

    // start the showing once any currently running
    // animations are done
    $('li#'+thisName).queue(function() {
        $(this).show(50, 'swing');
        $(this).dequeue();
    });
}).mouseout(function(e){
    e.stopPropagation();                    
    thisName = $(this).attr('title');

    // start the hiding once any currently running
    // animations are done 
    $('li#'+thisName).queue(function() {
        $(this).hide(50, 'swing');
        $(this).dequeue();
    });
});

【讨论】：