jQuery爲菜單導航，可用性添加延遲

與在superfish中發現的相似，Ive使用它在我的CSS菜單上爲懸停效果添加了輕微的延遲。以爲我會分享，看看是否有可能會有調整它的建議。jQuery爲菜單導航，可用性添加延遲

$('ul#nav li').hover(function(){ 
    var timer = $(this).data('timer'); 
    if(timer) clearTimeout(timer); 
    $(this).addClass('over'); 
},function(){ 
    var li = $(this); 
    li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 500)); 
});

來源

2015-02-07 drooh

ul#nav { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
ul#nav li { 
 
\t display: inline; 
 
\t float: left; 
 
\t position: relative; 
 
} 
 
ul#nav li a { 
 
\t display: block; 
 
} 
 
ul#nav li a:hover { 
 

 
} 
 
ul#nav li ul { 
 
\t display: none; 
 
\t position: absolute; 
 
     padding: 0px; 
 
     z-index: 100; /* if slider */ 
 
} 
 
ul#nav li:hover ul { 
 
\t display: block; 
 
} 
 
ul#nav li:hover ul li ul { 
 
\t display: none; 
 
} 
 
ul#nav li ul li:hover ul { 
 
\t display: block; 
 
} 
 
ul#nav li ul li { 
 
\t clear: left; 
 
} 
 
ul#nav li ul li a { 
 

 
}

來源

2015-02-07 03:29:25 drooh

一些快速的想法/思路重新調整：

當你有一個ID選擇，它更高效的直來直去的是選擇爲出發點。此外，查找子元素的效率更高，而不是將所有內容組合在一個選擇器中。

我也不會打擾一個計時器，當你可以連鎖.delay而不是。我不確定你想要實現什麼，所以我發佈了下面的例子來給出你如何使用.delay的要點。這是未經測試的，但基本上，在班級出現之前，你有很長時間的延遲，並且在焦點丟失之後再次長時間延遲之後將其刪除。您也可以使用slideDown and slideUp或fadeIn and fadeOut以獲得更好的效果。

我還添加了一個支票添加類，因爲人們可以進出菜單比給定的延遲快得多的部分。這可能可以做更多的思考。

$('#nav').find('li') 
.hover(function() 
{ 
    if (!$(this).hasClass('over')) 
    { 
     $(this).delay(500).addClass('over'); 
    } 
}) 
.blur(function() 
{ 
    $(this).delay(500).removeClass('over'); 
});

來源

2015-02-07 06:30:10

jQuery爲菜單導航，可用性添加延遲

回答

相關問題