4

ショーの事前遅延を伴う非常に単純なツールチップ スクリプトを作成しました。

しかし、私は自分のコードに問題があります

ホバー時間が 500 ミリ秒未満のツールチップを表示したくないのですが、fadeTo() アニメーション効果のために点滅効果があります

これは、.imgSpan にカーソルを合わせてから 500 ミリ秒未満でマウスをすばやく離すと、500 ミリ秒後に .img タグが表示され、すぐに非表示になることを意味します

ここに私のコードがあります

$(document).ready(function ()
{
    $('.img').css('display','none');
});
$('.imgSpan').hover(
function(){
    $(".imgSpan:hover .img").delay(500).fadeTo(500, 1);
},
function(){
    $(".img").css("display", "none");
    $(".img").fadeTo(0, 0);
}
);

HTML コード:

<span class='imgSpan'>
<a>
<img src='/images/image.png' class='middle' />
</a>
<img class='img' src='image_path' alt='image' />

ノート：

  • アニメーション効果を失いたくない

  • どのプラグインも使いたくない

4

2 に答える 2

2

これは、間違ったキューイングが原因です。

それを修正するには、CSS の行を次のように記述します。

$(".img").stop(true, true).css("display", "none");

これにより、セレクターのすべてのアニメーションがクリアされ、CSS が変更されます。

よくわかりませんが、停止時に秒を削除できると思いますtrue。あなたはそれを試す必要があります！

于 2013-05-09T15:48:37.373 に答える