hover - 高さの変更のためにホバーするときに、これに遅延を追加するにはどうすればよいですか?

Question

$(function(){
    $("#top-img").hover(function(){
    $(this).stop().animate({height:"400px"},{queue:false,duration:700});
        }, 

        function() {
    $(this).stop().animate({height:"300px"},{queue:false,duration:700});
    });
});

これは私が使用しているコードで、ほとんどの場合単純です。div#top-imgにカーソルを合わせると、高さ (CSS で設定)300pxから取得され、高さ400px.

少し遅らせていただきたいので、

1. 実行する前に、ユーザーはその上に 1 秒間カーソルを合わせる必要があります。
2. に戻る前に、少し離れなければなりません 300px。

Answer 1

HoverIntent jQuery プラグインを確認してください。私;過去に使用したことがありますが、使用と実装は非常に簡単です

Answer 2

この種の作業は機能しますが、問題はホバリングとオフホバリングを何度も繰り返すと、終了せずに上下し続けることです。したがって、両方から必要なものを追加する方法が必要です。.

$(document).ready(function(){
    $("#top-img").hover(function(){
    $(this).delay(400).animate({height:400},1000);
},function(){

    $(this).delay(300).animate({height:300},500);
    });
});