jQueryの遅延マウスアウト

Question

私はこのスクリプトを持っている：メニューのUL Liが2秒間オフにmousedされるまで

$("#menu ul li").mouseover(
    function() { 
     $(this).find(".submenu").fadeIn("slow"); 
    } 
); 

var timer = 0; 
function animate_me() { 
    $(this).find(".submenu").stop().fadeOut("slow"); 
} 
$(function(){ 
    $("#menu ul li").mouseout(function(){ 
     timer = setTimeout("animate_me()", 300); // start timer when mouse is moved in 
    }, function() { 
     clearTimeout(timer); // stop it if mouse is moved out 
    }); 
}); 

iはフェードアウトを遅らせる方法を教えてください。

Answer 1

すべての主な違いは、mouseoutは1つのパラメータだけをとります。この方法で使用する場合は、.hover()を使用する必要があります。そして、あなたは自分の目標を達成するために.dealy()を使用することができ、ここで

を遅らせる.stop(true,true)クリアはデモです： http://jsfiddle.net/meo/zTTFJ/

Answer 2

HoverIntent plugin for jQueryを使用してください。それはまさにあなたが必要とする以上のことをします。

特に、タイムアウト機能はこの機能を提供します。使用例：ドキュメント

タイムアウトから

function showIt() { $(this).find(".submenu").fadeIn("slow"); } 
function hideIt() { $(this).find(".submenu").stop().fadeOut("slow"); } 

$("#menu ul li").hoverIntent({ 
    over: showIt, 
    out: hideIt, 
    timeout: 300 /*ms*/ 
}); 

：

簡単な遅延（ミリ秒）、 "アウト" 機能の前には呼ばれています。 タイムアウトが になる前に、ユーザーが要素をマウスオーバーすると、 "out"関数が呼び出されません（また、 "over"関数が呼び出されることもありません）。これは主に、ターゲット要素から ユーザーを一時的に（そして意外にも）離してしまって、返す時間を与えてしまう、怠惰な/人間の マウス軌跡から守ることです。デフォルト タイムアウト：0