SetTimeout関数のヘルプ

Question

私は基本的にスープアップされたビジネス広告であるサイトを仕上げるのホームステイをしていますが、私はマウスの左にスライドしようとしている一連のliリンクに問題があります。

問題は基本的に、マウスセンターの機能はあまりにも敏感です。 IveはHoverIntentプラグインを調べましたが、プラグインが作成されたときにマウスセンターがサポートされていないjQuery関数であったため、マウスセンターをサポートしていないことを理解しています。だから私はSetTimeout関数を使うことにしましたが、正しく動作するようには思えません。ここで

は私がsetTimeout関数を実装しようとしているのjQueryの一部です：

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

私の質問は、私は1つの関数にこれらを組み合わせることする必要がありますか？もしそうなら、どのようにすればいいのですか？また、マウスの領域をすばやくドラッグすることでアニメーションが呼び出されないように、SetTimeoutを実装するためにはどうすればいいですか？前もって感謝します。

Answer 1

ここでは、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(); 
}); 

され、偶発mouseentersを支援するためplugin called hoverIntentがあります。

---

あなたは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(); 
}); 

また、1 .homeのそれぞれ、.aboutなど、要素だけあるかどうか、それ以上存在する場合、しかし、ハンドラはイベントのみを受信した1つに影響を与えることを意図している、あなたは置き換えることができます。

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

をして：

あなたが必要なもの

$(this).stop() 

Answer 2

デバウンス..ですこの を見てみましょう、これは、単一のセクションにそれを作るために...特定のタイムアウト後

今

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

をハンドラを呼び出します忘れないでくださいあなたは、すべてmenuの2番目のクラスを定義することができます。 $(".menu").something()を使用してハンドラを設定します。

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

あなたはデバウンスもmouseleaveで発生する場合、あなたはそのサイトからjQueryのためのデバウンス拡張子をインポートしていることに注意してください

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

を使用することができます。デバウンスはjqueryに組み込まれていません。