setTimeout在jQuery中切換

當鼠標懸停在菜單項上時，我的菜單顯示一個圖標和一些文本。不幸的是，當從頂部到底部（和背部）懸停時，淡入淡出的動畫會使所有圖像和文字互相滲透，這看起來不太好。setTimeout在jQuery中切換

我正在尋找一種方法來在切換上放置setTimeout，以便圖標和文本僅在用戶將鼠標懸停在菜單項上超過1秒時纔會顯示。如果用戶快速懸停在菜單項上，圖標和文本將不會顯示。

這是jQuery的我現在有：

$('.button').hover(function() { 
var id = $(this).attr('id').substr(4); 
$('.content').not('#photo' + id).fadeOut(); 
$('.text').not('#info' + id).fadeOut(); 

$('#photo' + id).fadeToggle(); 
$('#info' + id).fadeToggle(); 
}); 


$('.button').mouseout(function() { 
    $('.content').fadeOut(); 
    $('.text').fadeOut(); 
});

我做了的jsfiddle一個活生生的例子：http://jsfiddle.net/MaxdeMooij/9ozqgLwq/ 大約有setTimeout的上slidetoggles一些話題，但我不能整合這些sollutions我的代碼。誰能幫我？它會很棒。

感謝您的幫助！

來源

2014-11-06 Max de Mooij

下面是使用定時器另一種解決方案。這個玩家可以保持淡出。

var timerHandle = null; 
$('.button').hover(function() { 
    if (timerHandle != null) { 
     clearTimeout(timerHandle); 
     timerHandle = null; 
    } 
    timerHandle = setTimeout($.proxy(function() { 
     var id = $(this).attr('id').substr(4); 
     $('.content').not('#photo'+id).fadeOut(); 
     $('.text').not('#info'+id).fadeOut(); 

     $('#photo'+id).fadeToggle(); 
     $('#info'+id).fadeToggle(); 
    }, this), 500); 
}); 

$('.button').mouseout(function(){ 
    $('.content').fadeOut(); 
    $('.text').fadeOut(); 
    if (timerHandle != null) { 
     clearTimeout(timerHandle); 
     timerHandle = null; 
    } 
});

A jsFiddle已被提供。

來源

2014-11-06 23:08:09 Kolban

稍微複雜一些，但效果看起來不錯！謝謝。 :) – 2014-11-06 23:11:16

沒有問題最大。如果答案一如既往有價值，隨時可以投票。 – Kolban 2014-11-06 23:12:49

我試過投票了，但我沒有所需的15個聲望點。但我想我會使用這個代碼，因爲平滑的淡入淡出。我花了好幾天的時間試圖解決這個問題，並花了你5分鐘.. – 2014-11-06 23:22:03

這是你要找的效果嗎？馬上就未來li隱藏，而是淡出否則......

$('.button').hover(function() { 
    $('.content').hide(); 
    $('.text').hide(); 
    var id = $(this).attr('id').substr(4); 
    $('#photo' + id).fadeToggle(); 
    $('#info' + id).fadeToggle(); 
}, function() { 
    $('.content').fadeOut(); 
    $('.text').fadeOut(); 
});

FIDDLE

來源

2014-11-06 23:00:59 Tomanow

這就是我要找的！清潔和高效，謝謝！ – 2014-11-06 23:03:51

setTimeout在jQuery中切換

回答

相關問題