SetTimeout函數的幫助

Question

我正在完成一個網站，這基本上是一個加強的商業廣告的主頁，但我有一個問題，我試圖在mouseenter上左滑動一組li鏈接。

問題是，mouseenter函數太敏感了。我查看了HoverIntent插件，但我知道它不支持mouseenter，因爲在編寫插件時mouseenter不是支持的jQuery函數。所以我決定使用SetTimeout函數，但我似乎無法使它正常工作。

這裏的jQuery的部分我試圖實現與setTimeout函數：

$(document).ready(function() { 
    $('.home').mouseenter(function(){ 
     $('.home').stop().animate({left:'55%'}, 1000) 
     $('#icon_home:hidden').delay(600).fadeIn(600); 
    }).mouseleave(function(){ 
     $('.home').stop().animate({left:'50%'}, 1000) 
     $('#icon_home').hide(); 

    $('.about').mouseenter(function(){ 
     $('.about').stop().animate({left:'55%'}, 1000) 
     $('#icon_about:hidden').delay(200).fadeIn(600); 
    }).mouseleave(function(){ 
     $('.about').stop().animate({left:'50%'}, 1000) 
     $('#icon_about').hide(); 

    $('.contact').mouseenter(function(){ 
     $('.contact').stop().animate({left:'55%'}, 1000) 
     $('#icon_contact:hidden').delay(200).fadeIn(600); 
    }).mouseleave(function(){ 
     $('.contact').stop().animate({left:'50%'}, 1000) 
     $('#icon_contact').hide(); 

    $('.services').mouseenter(function(){ 
     $('.services').stop().animate({left:'55%'}, 1000) 
     $('#icon_services:hidden').delay(200).fadeIn(600); 
    }).mouseleave(function(){ 
     $('.services').stop().animate({left:'50%'}, 1000) 
     $('#icon_services').hide(); 
    }); 
    }); 
    }); 
    }); 

//Hidden icons 
    $('#icon_home').hide(); 
    $('#icon_about').hide(); 
    $('#icon_contact').hide(); 
    $('#icon_services').hide(); 
}); 

HTML：

<div id="icon_home"><img src="Icons/home.png" width="60" height="60" /></div> 
<div id="icon_about"><img src="Icons/about.png" width="60" height="60" /></div> 
<div id="icon_contact"><img src="Icons/contact.png" width="60" height="60" /></div> 
<div id="icon_services"><img src="Icons/services.png" width="60" height="60" /></div> 
<div id="thumb"> 
     <ul> 
     <li class="home"><a rel="images/gallery/thumb/home.png" src="images/gallery/home.png" a href=" http://gmdcpa.com"> 
         <img src="images/gallery/thumb/home.png" border="0" alt="" /></a></li> 
     <li class="about"><a rel="images/gallery/thumb/about us.png" src="images/gallery/about us.png" a href="http://gmdcpa.com"> 
          <img src="images/gallery/thumb/about us.png" border="0" alt="" /></a></li> 
     <li class="contact"><a rel="images/gallery/thumb/Contact Us.png" src="images/gallery/Contact Us.png" a href="http://gmdcpa.com"> 
          <img src="images/gallery/thumb/Contact Us.png" border="0" alt="" /></a></li> 
     <li class="services"><a rel="images/gallery/thumb/Services.png" src="images/gallery/Services.png" a href="http://gmdcpa.com"> 
          <img src="images/gallery/thumb/Services.png" border="0" alt="" /></a></li> 
     </ul> 
</div> 

我的問題是，我應該可以在這些組合成一個功能？如果是這樣，我該如何去做，我該怎麼做才能實現SetTimeout，所以動畫不會通過鼠標快速拖動鼠標區域來調用？提前致謝。

Answer 1

這是一個功能

var sections = ['home','about','contact','services']; 

$.each(sections, function(i,val) { 
    $('.' + val).mouseenter(function() { 
     $('.' + val).stop().animate({left:'55%'}, 1000) 
     $('#icon_' + val + ':hidden').delay(600).fadeIn(600); 
    }).mouseleave(function(){ 
     $('.' + val).stop().animate({left:'50%'}, 1000) 
     $('#icon_' + val).hide(); 
}); 

而且還有一個plugin called hoverIntent幫助附帶mouseenters。

---

爲了使之更有效率，你可以緩存DOM選擇：

$.each(sections, function(i,val) { 
    var main = $('.' + val); 
    var icon = $('#icon_' + val); 
    main.mouseenter(function(){ 
     main.stop().animate({left:'55%'}, 1000) 
     icon.filter(':hidden').delay(600).fadeIn(600); 
    }).mouseleave(function(){ 
     main.stop().animate({left:'50%'}, 1000) 
     icon.hide(); 
}); 

此外，如果只有一個每個.home，.about，等元素，或者如果有更多的，但處理程序只用於影響接收到事件的人，那麼你就可以更換：

$('.' + val).stop() 

有：

$(this).stop() 

Answer 2

你需要的是一個反跳..看看這個 記住特定超時後，這將調用處理程序...

http://benalman.com/projects/jquery-throttle-debounce-plugin/

現在將它做成一個單節，你可以定義第二個類的所有說menu。並使用$(".menu").something()來設置處理程序。

$(".menu").bind({ 
    mouseenter: $.debounce(250,function() {}), 
    mouseleave: function() {} 
}); 

如果你想要去抖動對鼠標離開發生也，你可以使用

mouseleave: $.debounce(200, function(){}) 

請記住，你從該網站導入的jQuery去抖擴展。去抖動不是內置到jquery中。