2秒後にマウスの上/外にjQueryスライドアップ/アウトコンテンツ - バグ

Question

マウスが画像上にあるとき、2秒後にスパンコンテンツが下にスライドします。それはうまくいく。

私は誰かがあまりにもそのスパンの上にマウスを移動した場合に表示されるスパンにしたい、と私の問題が始まる...

私は十分に明らかになった場合、私は知らないが、私はコードがあなたよりも多くを教えてくれますだと思います言葉:)

リンク：http://jsfiddle.net/zDd5T/3/

HTML：

<img id="image" src="button_green.png" /> 
<span id="content"> 
    <a href="http://www.google.com">Link</a> 
    Some content here 
</span> 

CSS：

#image{ 
    left:0px; 
    position:absolute; 
    z-index: 10; 
} 
#content{ 
    top:48px; 
    left:0px; 
    position:absolute; 
    height: 100px; 
    border: 1px solid #f00; 
    display: block; 
    z-index: 0; 
    width: 100px; 
} 

のJavaScript：事前に

$(document).ready(function() { 
    $('#content').hide(); 
    var over_img = false; 
    var over_span = false; 
    $('#image').live('mouseover', function() { 
     over_img = true; 
     setTimeout(function() { 
      $('#content').show('slide', { 
       direction: 'up' 
      }, 1000); 
     }, 2000); 
    }); 
    $('#content').live('mouseover', function() { 
     over_span = true; 
     setTimeout(function() { 
      $('#content').show('slide', { 
       direction: 'up' 
      }, 1000); 
     }, 2000); 
    }); 
    $('#image').live('mouseout', function() { 
     over_img = false; 
     if (!over_img && !over_span) { 
      setTimeout(function() { 
       $('#content').hide("slide", { 
        direction: "up" 
       }, 1000); 
      }, 2000); 
     } 
    }); 
    $('#content').live('mouseout', function() { 
     over_span = false; 
     if (!over_img && !over_span) { 
      setTimeout(function() { 
       $('#content').hide("slide", { 
        direction: "up" 
       }, 1000); 
      }, 2000); 
     } 
    }); 
}); 

ありがとう！

Answer 1

jQuery 1.7以降では、廃止予定の.live（）の代わりにon（）を使用します。

私はこれがあなたの問題を解決しなければならないと考えている：

$(document).ready(function() { 
    var T1, T2; 
    $('#content').hide(); 
    $('body').on({ 
     mouseenter: function() { 
      clearTimeout(T2); 
      T1 = setTimeout(function() { 
       $('#content').slideDown(1000); 
      }, 2000); 
     }, 
     mouseleave: function() { 
      clearTimeout(T1); 
      T2 = setTimeout(function() { 
       $('#content').slideUp(1000); 
      }, 2000);  
     } 
    }, '#image, #content'); 
});​ 

はここで答えをFIDDLE

Answer 2

私が正しくあなたの問題を理解していた場合は、次のように、私はあなたのマークアップを再構築します：

<div class="container"> 
    <img ... > 
    <div class="content"> 
    ..... 
    </div> 
</div> 

をその後、代わりに画像にあなたのホバーイベントを結合の代わりに、親コンテナにバインドします。このようにして、コンテンツdivが表示されたら、まだホバーイベントがバインドされているコンテナの親要素の中にあるので、マウスが画像またはコンテンツdiv（または他の要素コンテナ内）