jquery 鼠标悬停鼠标悬停

发布于 2024-11-11 18:44:08 字数 690 浏览 2 评论 0原文

$('.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/

原文

$('.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');

    });

I have four pictures with the class 'rollover', so when the mouse goes over each picture, a list item that shares its id with the image title is displayed, and when the mouse leaves the list item is hidden.

My problem is that the images are quite close together and if the mouse enters and leaves too quickly it just looks like the list items are flashing. I would prefer it so that the mouseout animation has to complete before the next mouseover animation begins and vice versa.

How would i do this?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

娜些时光，永不杰束 2024-11-18 18:44:08

与其在用户可以查看新内容之前完成每个动画来减慢速度，不如使用类似悬停意图插件以防止“意外”鼠标悬停？

回复收藏 0 原文

玉环 2024-11-18 18:44:08

尝试使用 .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();
    });
});

Try using the .queue (untested):

$('.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();
    });
});

回复收藏 0 原文

~没有更多了~