Question

这是我动画幻灯片的简单代码。它应该做两件事： - 首先在'mouseenter'事件中 - 它反弹“拇指”图像 - 秒 - 显示并弹回缩略图的大图像

$('img.thumb').mouseover(function (){
    $(this).effect('bounce', 500, function(){
        var src = 'images/screens/' + $(this).attr('id').substr(0,1) + '.jpg';
        $('.slideShow img').attr('src' ,src);
        $('.slideShow img').toggle('bounce').css('margin-top','2.5%');
        });
    });
$('img.thumb').mouseleave(function (){
        $('.slideShow img').fadeOut();
    });

问题在于它在谷歌浏览器中运行得非常完美，但在Firefox和IE中它表现得很疯狂：拇指图像保持弹跳，更大的图像不断出现和消失。

这里的诀窍是什么？

Answer 1

根据我对你的帖子的理解，我认为Jquery工具提示Widget是您正在寻找的自定义动画： http://jqueryui.com/tooltip/#custom-animation

这符合您的要求吗？

Answer 2

$('img.thumb').mouseover(function (){
    $(this).effect('bounce', 500, function(){
        var src = 'images/screens/' + $(this).attr('id').substr(0,1) + '.jpg';
        $('.slideShow img').attr('src' ,src);
        $('.slideShow img').css('margin-top','2.5%');
        });
    });
$('img.thumb').mouseleave(function (){
        $('.slideShow img').fadeOut();
    });

jQuery动画方法没有停止

2 个答案: