jQuery中的Animate不透明度会留下ghost元素

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-visibility CSS属性设置为hidden，这解决了chrome中的问题。对不起，但我无法通过解释附上此修复程序：）

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