1

一部の要素の不透明度をアニメーション化すると、アニメーションが常に終了しないようです。ツールチップの結果は次のとおりです (複製するには、マウスを 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/

4

1 に答える 1

7

これは、アニメーションが完了する前に再び開始しようとしているためです。これに対する 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-visibility1 つの解決策は、 CSS プロパティをツールチップに設定することhiddenで、クロムの問題を解決するようです。申し訳ありませんが、この修正に説明を添えることはできません:)

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

于 2013-07-29T19:00:15.417 に答える