1

Webサイトで作業していて、ドロップダウンメニュー項目の現在のコードを変更したいと思います。現在のコードは次のとおりです。

$(document).ready(function () { 

$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(300);

    }, 
    function () {
        //hide its submenu
        $('ul', this).slideUp(300);         
    }
);

});

ユーザーがマウスをメニューから離したときのタイムアウトを設定して、メニューがスライドアップ効果をすぐに切り替えないようにするために、コードを変更してタイムアウトを追加してみました。私が望む望ましい効果は、ユーザーがマウスをメニューから200ミリ秒ほど離した後、メニューに戻しても何も起こらないことです。したがって、メニューはスライドアップ機能を切り替えるために300〜400ミリ秒のように待機します。これが私が書いたコードで、機能しませんでした。thisそれの一部はとにかくのせいでした、これは$('ul', this).slideUp(250);私が実装しようとしたがうまくいかなかったコードです：

$(document).ready(function () { 
var timeoutID;
$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(250);
        window.clearTimeout(timeoutID);
        timeoutID = window.setTimeout(SlideUp, 350);
    },  
);
function SlideUp() {
    //hide its submenu
    $('ul', this).slideUp(250);         
}
});

スライドアップ機能を切り替えるためにプログラムを待機させる最良の方法は何ですか？どんなアイデアでも大歓迎です。ありがとう。

4

3 に答える 3

2

これがあなたがやりたかったことです。

$(document).ready(function () { 
  var timeout;
  $('#nav li').hover(function () {
    //show its submenu
    clearTimeout(timeout);
    $('ul', this).slideDown(300);
  }, function () {
    //hide its submenu
    var self = this;
    timeout = setTimeout(function(){
      $('ul', self).slideUp(300);         
    }, 300);
  });
});​
于 2012-06-13T20:27:42.910 に答える
0

バージョン1.5で導入されたjQuery.Deferred（）は、複数のコールバックをコールバックキューに登録し、コールバックキューを呼び出し、同期または非同期関数の成功または失敗の状態を中継できるチェーン可能なユーティリティオブジェクトです。

これを見てください。

于 2012-06-13T20:18:14.123 に答える
0

あなたの特定の質問に対する答えではありませんが、transition-delay可能であれば、フィドルを使用します。

于 2012-06-13T20:50:19.723 に答える