jQueryでアニメーションを遅らせる方法

Question

私はリンクを持っています。私の上にマウスを置くと、1〜2秒の遅れがあり、その後divが表示されます。 divは私がその上にマウスを置いたときに留まるべきです。

リンクまたはdivにマウスを乗せていない場合は、divが1-2秒遅れて消えるはずです。

これを行う方法がわかりません。助けてもらえますか？私が達成しようとしていることは、Googleがどのようにウェブサイトのプレビューをしているかと似ています。

var formHide; 
$('.toggleDisForm').hover(function() { 
    var form = $(this).parents("li").find(".dispenserForm"); 
    function showIt() { 
     form.fadeIn(); 
    } 
    show = setTimeout(showIt, 1000); 
    clearTimeout(formHide); 
}, function() { 
    var form = $(this).parents("li").find(".dispenserForm"); 
    function hideIt() { 
     form.fadeOut(); 
    } 
    clearTimeout(show); 
    hideDispen = setTimeout(hideIt, 1000); 
    $('.dispenserForm').not(form).hide(); 
}); 

var hideDispen; 
$('.dispenserForm').hover(function() { 
    $('.dispenserForm').not(this).hide(); 
    clearTimeout(hideDispen); 
}, function() { 
    var form = $(this); 
    function showMe() { 
     form.show(); 
    } 
    formHide = setTimeout(showMe, 1000); 
}); 

彼女は、マークアップ

<ul class="clearfix">  
    <li> 
     <div class="inner"> 
      <a class="toggleDisForm" href="#">hover 
         <div class="dispenserForm"> 
       The div that should appear 
        </div> 
        </a> 
     </div> 

    </li> 

    <li> 
     <div class="inner"> 
      <a class="toggleDisForm" href="#">hover 
         <div class="dispenserForm"> 
       The div that should appear 
        </div> 
        </a> 
     </div> 
    </li> 

    <li> 
     <div class="inner"> 
      <a class="toggleDisForm" href="#">hover 
         <div class="dispenserForm"> 
       The div that should appear 
        </div> 
        </a> 
     </div> 
    </li> 

    etc...  
</ul> 

Answer 1

あなたがsetTimeoutを内部のコードがグローバルスコープで実行されているため、機能していない投稿しているコードを：これはちょうどあなたが遅延タイマーを入れてO/W）（.SHOW使用することはできません。 thisはもはや同じものをもう指しません。

$('.toggleDisForm').hover(function() { 
    var form = $(this).parents("li").find(".dispenserForm"); 
    function showIt() { 
     form.show(); 
    } 
    show = setTimeout(showIt, 2000); 
}, function() { 
    clearTimeout(show); 
    $('.dispenserForm').hide(); 
}); 

一般に、（文字列ではなく関数を使用して）このようにsetTimeoutを使用する方が良い方法です。

編集：あなたのコメントに応じて、表示されてからちょっとぶらぶらすることができるかどうかを見てみましょう。

var formHide; 
$('.toggleDisForm').hover(function() { 
    var form = $(this).parents("li").find(".dispenserForm"); 
    function showIt() { 
     form.show(); 
    } 
    show = setTimeout(showIt, 2000); 
    clearTimeout(formHide); 
}, function() { 
    var form = $(this).parents("li").find(".dispenserForm"); 
    function hideIt() { 
     form.hide(); 
    } 
    clearTimeout(show); 
    hide = setTimeout(hideIt, 1500); 
    $('.dispenserForm').not(form).hide(); 
}); 
$('.dispenserForm').hover(function() { 
    $('.dispenserForm').not(this).hide(); 
    clearTimeout(hide); 
}, function() { 
    var form = $(this); 
    function hideMe() { 
     form.hide(); 
    } 
    formHide = setTimeout(hideMe, 500); 
}); 

これは機能しますか？

Answer 2

ちょうどあなたのアニメーションの前に.delayを使用しています。このよう

$(foo).delay(2000).show(200); 

、タイマーを使ってアニメーション

Answer 3

のキューを構築避けるために.stopを使用するために覚えて、ユーザーが離れてあなたのリンクから移動した場合、それはあなたが簡単にタイマーをクリアすることができますので、クリーンな方法であります。

$('.yourLink').hover(function() { 
    show = setTimeout('$("#yourDiv").show();', 2000); 
}, function() { 
    clearTimeout(show); 
    $('#yourDiv').hide(); 
}); 

これはちょうど私の実装です。あなたが探しているのはツールチップの機能ですが、そこには本当に良いツールチップのプラグインがたくさんあります。私はそれらの1つを使用することをお勧めします。

編集：Janの実装は、わずか1つの小さな警告でも動作します。 .delay（）が動作するためには、コマンドは単にアニメートされるだけです。

$('a').hover(function() { 
    $("div").delay(2000).show(1); 
}, function() { 
    $('div').stop(true,true).hide(); 
});