jQuery.hoverは、ユーザーがdoc readyの前にホバリングしている場合に問題を引き起こします。

Question

以下のコードは、1つの条件を除いて大きく機能します。ユーザーがドキュメントの準備が整う前に要素の上にカーソルを置くと、slideToggleの同期が外れます（または逆になります）。

結果として#logged_in_navがマウスアウト時に表示され、ホバーするとボックスが消えます。これを解決する簡単な方法は何ですか？

$("#logged_in_box").hover(function(){ 
      $("#logged_in_nav").stop(true, true).slideToggle("fast"); 
      $(this).addClass("logged_in_box_hover"); 
     }, // hover over 
     function() { 
      $("#logged_in_nav").stop(true, true).slideToggle("fast"); 
      $(this).removeClass("logged_in_box_hover"); 
     } // hover out 
    ); // hover 

Answer 1

slideToggleを使用しないでください。代わりにslideDown()^(docs)とslideUp()^(docs)を使用して、方向がイベントタイプに明示的に結び付けられているようにしてください。

$("#logged_in_box").hover(function(){ 
     $("#logged_in_nav").stop(true, true).slideDown("fast"); 
     $(this).addClass("logged_in_box_hover"); 
    }, // hover over 
    function() { 
     $("#logged_in_nav").stop(true, true).slideUp("fast"); 
     $(this).removeClass("logged_in_box_hover"); 
    } // hover out 
); // hover