jQueryの表示/非ホバー上のスライドでショー...これを行うには良い方法はありますか？

Question

は、基本的にアイテムを表示または非表示するためにホバーを用いたいくつかの問題を有します。

アイデアは、ホバーのdivを表示するには、簡単です。ホバリングすると、もはや、それを隠します。マウスは、divの上に置くと、あまりにも速く、表示/非表示のdivを可視滞在する離れた場合の問題があります。私は、これはホバーイベントで簡単に解消何かしていない典型的な問題である願っています。

 jQuery
 (
   function() 
   {
     jQuery(".slideDiv").hide();

     jQuery(".mainDiv").hover
     (
       function() 
       {
         var children = jQuery(this).children(".slideDiv");

         if (children.is(":hidden")) 
         {
           children.show("slide", { direction: "left" }, 100);
         }
       },
       function() 
       {
          var children = jQuery(this).children(".slideDiv");
          children.hide("slide", { direction: "left" }, 100);
       }
     );
   }
 );

スタイルは次のようになります：

 .mainDiv
 {
   margin:5px;
   height:200px;
 }

 .slideDiv
 {
   background-color:Teal;
   float:left;
   height:200px;
   position:absolute;
   z-index:100;
 }

とマークアップ

    <div class="mainDiv">
        <div class="showDiv">
            Hover me
        </div>
        <div class="slideDiv">
            Do you see me?
        </div>
    </div>
    <div class="clear"></div>
    <div class="mainDiv">
        <div class="showDiv">
            Hover me too
        </div>
        <div class="slideDiv">
            Do you see me now?
        </div>
    </div>

Answer 1

href="http://cherne.net/brian/resources/jquery.hoverIntent.html" rel="nofollow noreferrer"> hoverIntent のプラグイン

Answer 2

私はあなたのスクリプトを試してみましたが、あなたが説明するようにしました。あなたのスクリプトから：（「隠された」）が、問題はまだ発生して私はchildren.isを削除しようとしました。

私はそれのdivが表示されたまま決してスクリプト書き直したとき。

：だから、問題が使用してjQueryのの子供の代わりにの発見のオブジェクトを取得するためにであることが表示されます

それでも問題があります：

 jQuery (
   function(){
     jQuery(".slideDiv").hide();
     jQuery(".mainDiv").hover (
       function() {
         $(this).children(".slideDiv").show("slide", { direction: "left" }, 100);
       },function(){
         $(this).children(".slideDiv").hide("slide", { direction: "left" }, 100);
       }
     );
   }
 );

意図したとおりに

作品ます：

 $(document).ready(function(){
   $('.slideDiv').hide();
   $('.mainDiv').hover(
     function(){
       $(this).find('.slideDiv').show('slide', { direction: 'left' }, 100)
     },
     function(){
       $(this).find('.slideDiv').hide('slide', { direction: 'left' }, 100)
     }
   )
 })

そして、はい、hoverIntentプラグインがいいです：P