jquery工具提示延遲顯示

我寫了一個非常簡單的工具提示腳本，延遲顯示。jquery工具提示延遲顯示

但我有一些問題，我的代碼

我不想過多顯示，有提示小於500毫秒懸停時間，但我因爲fadeTo（）動畫效果的閃爍效果

這意味着當我趕緊懸停在.imgSpan然後unhover鼠標小於500毫秒，在.IMG標籤會後500毫秒快速關閉或顯示

這裏是我的代碼

$(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' />

筆記：

我不想失去動畫效果
我不希望使用任何插件

來源

2013-05-09 Mohammad Masoudian

jQuery並不像僞選擇器那樣定位：懸停！ – adeneo 2013-05-09 15:46:53

你可以添加你使用的HTML嗎？ – Justin 2013-05-09 15:48:53

問題編輯和HTML代碼添加 – 2013-05-09 15:56:31

這是因爲錯誤的排隊。

要糾正的是，你可以寫在CSS行這樣的：

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

這將清除在選擇每一個動畫，然後更改CSS。

林不知道，但我認爲你可以刪除第二個true停止。你只需要嘗試一下！

來源

2013-05-09 15:48:37

這工作謝謝你你能投票給我嗎？：d – 2013-05-09 16:01:36

選擇器.imgSpan:hover不正確。

既然你沒有提到HTML，假設（通過選擇在問題中提到這是$(".imgSpan:hover .img")即.imgSpan兒童），

<div class="imgSpan">Hover me 
<div class="img">Some</div> 
</div>

這裏是正確的JS -

$('.img').css('display','none'); 
$('.imgSpan').hover(function(){ 
    $(this).find(".img").delay(1000).fadeTo(500, 1); 
},function(){ 
    $(".img").css("display", "none"); 
    $(".img").fadeTo(0, 0); 
});

Demo here

來源

2013-05-09 15:55:43 SachinGutte

jquery工具提示延遲顯示

回答

相關問題