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

hoverIntentプラグインを使用するマークアップ。これにより、ユーザが要素の上にマウスを単に渡して見苦しいアニメーションの連鎖を回避するだけで、何かが表示されるのを避けることができます。

Answer 2

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

スクリプトを書き直すと、divスクリプトは表示されません。意図

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) 
    } 
    ) 
}) 

はまだ問題を抱えている：だから、問題は、オブジェクトを取得するを見つけるjQueryの子供代わりのを使用していることが表示されます

はい、hoverIntentプラグインはいいです：P