jquery - jQuery中的动画不透明度会留下幽灵元素

Question

当我为某些元素的不透明度设置动画时，动画似乎并不总是完成。我的工具提示上的结果如图所示（要复制，在 div 上来回摆动鼠标）：

框 1 和框 2 上仍然有鬼元素。

这是我的 jQuery

$(document).ready(function(){
    $(".thumbnail").hover(function(){
        $(this).parent().find(".tooltip").animate({
            opacity: 1,
            top: '105%'
        }, 200, 'swing', false);
        $(this).find(".label").stop(false, true).fadeIn(2); 
    },function(){
        $(this).parent().find(".tooltip").animate({
            opacity: 0,
            top: '100%'
        }, 200, 'swing', false);
        $(this).find(".label").stop().fadeOut();
    });

    $(".label").click(function(){
        var url = $(this).find('h3 a').attr('href');
        window.location.href = url;

    })
});

还有一个小提琴：http: //jsfiddle.net/qu7Tu/

Answer 1

这是因为您的动画在完成之前会尝试重新开始。对此的一种解决方案是stop()在每个动画调用之前添加以在开始新动画之前停止当前动画。例如：

$(this).parent().find(".tooltip").stop().animate({
            opacity: 0,
            top: '100%'
        }, 200, 'swing', false);

JSFiddle：http: //jsfiddle.net/qu7Tu/1/

---

编辑

这似乎是 Chrome 中的一个渲染问题（不透明度在 Chrome 检查器中显示为 0，并且该错误在 Firefox 中不存在）。

一种解决方案似乎是将-webkit-backface-visibilityCSS 属性设置hidden为工具提示，这解决了 chrome 中的问题。对不起，但我无法解释这个修复:)

JSFiddle：http: //jsfiddle.net/qu7Tu/2/