快捷導(dǎo)航

ClearTimeout消除閃動(dòng)實(shí)例代碼

更新時(shí)間：2016年02月29日 13:47:30 作者：stoneniqiu

本文給大家介紹ClearTimeout消除閃動(dòng)相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

定義和用法

clearTimeout() 方法可取消由 setTimeout() 方法設(shè)置的 timeout。

語(yǔ)法

clearTimeout(id_of_settimeout)

參數(shù)	描述
id_of_settimeout	由 setTimeout() 返回的 ID 值。該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊。

需求：當(dāng)鼠標(biāo)放到父級(jí)菜單上面的時(shí)候，顯示下方的子菜單。鼠標(biāo)從子菜單或者父級(jí)菜單上面移開(kāi)的時(shí)候，子菜單要收起來(lái)。最終效果如下：

PS：這樣需求很常見(jiàn)，最常見(jiàn)的做法是li元素下面再嵌套一個(gè)Ul元素來(lái)包含子元素。這種做法用css就可以完全控制。但今天這個(gè)子菜單和導(dǎo)航欄是分開(kāi)的。即到鼠標(biāo)到產(chǎn)品上面的時(shí)候顯示header-tags塊。

<ul class="header-nav">
<li class="nav-item home"><a href="@Url.Action("Index", "Home")">首頁(yè)</a></li>
<li class="nav-item products" id="header_tags">
<a href="#">產(chǎn)品<span class="icon-caret-down"></span></a>
....
</li>
</ul>
<div class="header-tags">
<ul>
<li>
<img class="screening-img-normal" src="~/Content/static/all.png">
<img class="screening-img-hover" src="~/Content/static/all1.png">
<p>全部</p>
</li>
<li tagid="4">
<img class="screening-img-normal" src="~/Content/static/shafa.png">
<img class="screening-img-hover" src="~/Content/static/shafa1.png">
<p>沙發(fā)</p>
</li>
<li tagid="3">
<img class="screening-img-normal" src="~/Content/static/zuoyi.png">
<img class="screening-img-hover" src="~/Content/static/zuoyi1.png">
<p>座椅</p>
</li>
....
</div>

這無(wú)法用css完全控制(hover只能控制子元素或兄弟元素)。

/*父子*/
#a:hover #b{display: block} 
/*兄弟*/
#a:hover + #b{display: block}

上面的情況就要用腳本了。這里涉及到#header_tags和.header-tags兩個(gè)元素的移入移出。當(dāng)鼠標(biāo)移入#header_tags，.header-tags顯示，當(dāng)鼠標(biāo)再移入.header-tags的時(shí)候不能立即觸發(fā)#header_tags的moveout事件，而要保持tags繼續(xù)顯示。只有到鼠標(biāo)從#header_tags和.header-tags離開(kāi)后沒(méi)有再進(jìn)入才會(huì)把子菜單收起來(lái)。

$(function () {
var tagsTime;
$(document).on('mouseover mouseout', '#header_tags', function(event){
var $headerTagsBox = $('.header-tags');
if (event.type == 'mouseover') {
clearTimeout(tagsTime);
$headerTagsBox.slideDown(300);
}
else if (event.type == 'mouseout') {
tagsTime = setTimeout(function(){
$headerTagsBox.slideUp(200);
}, 200);
}
});
$('.header-tags').hover(function(){
clearTimeout(tagsTime);
},function(){
var $me = $(this);
tagsTime = setTimeout(function(){
$me.slideUp(200);
}, 200);
}); });

如果這里沒(méi)有清除定時(shí)器和加上延時(shí)執(zhí)行，導(dǎo)航欄就會(huì)不斷的閃動(dòng)。根本無(wú)法點(diǎn)擊。

您可能感興趣的文章: