0

私は現在、fotopunch.comで見られるものとほとんど同じメニュー ナビゲーションを含む Web サイトを作成しています。とにかく、メニューにjquery/javascriptを使ってコードを書いたところ動作しますが、指定した時間ホバー機能が有効にならないようにする方法があるかどうか疑問に思っています。そうすれば、アイテムの上にすばやくホバーしても、ページが不必要に読み込まれることはありません。誰かが何か提案があれば、私はそれを大いに感謝します.

以下は、メニュー ナビゲーションを作成するためのコードの一部のコピーです。私が抱えているもう 1 つの問題は、あまりにも多くのナビゲーション項目にカーソルを合わせすぎると、矢印が遅れてしまうことです。ホバー機能が有効になる前に待機時間を作成することで、この問題がほとんど修正されることを願っています。

$("div#menu .reps").hover(function() {

if(current_slide != "reps"){
    $(".arrow").animate({"left":"135px"});//move the arrow
    if(current_slide == "clients"){
        $(".clients_display").stop(true, true).fadeOut().hide();
        $(".reps_display").fadeIn().show();
        current_slide = "reps";
    }
    else if(current_slide == "services"){
        $(".services_display").stop(true, true).fadeOut().hide();
        $(".reps_display").fadeIn().show();
        current_slide = "reps";
    }
    else{
        $(".training_display").stop(true, true).fadeOut().hide();
        $(".reps_display").fadeIn().show();
        current_slide = "reps";
    }
}
});
4

2 に答える 2

0

delay次のような一部の通話で を使用できます。

$(".reps_display").delay(100).fadeIn().show();

または、いくつかを作成showしhideて、より長い期間にすることもできます: show(2000)たとえば。

于 2012-06-04T22:47:19.317 に答える
0

おそらくもっと良い方法がありますが、できることは次のとおりだと思います。

すべてのコードを条件付きで配置する関数を宣言します。

function hoverFunc(option)
{
    if($(option).is(':hover'))
    {
      all the code to show the menu
    }
}

そして、 over 関数で次のことを行います。

$("div#menu .reps").hover(function() {
   setTimeout("hoverFunc('"+getOptionName+"')",milliseconds);
});

アイデアは次のとおりです。オーバーしたら、タイムアウトを設定し、タイムアウトに達したら、マウスがオーバーしているかどうかを確認してから、必要なことを行います。最も難しい点は、関数への参照を渡すことですが、関数の名前を渡すことができますhtml または rel 属性から取得するだけのアイテム。

ただし、参照が必要ない場合は、関数を呼び出して要素を確認するだけで本当に簡単です。

おそらくあなたにとってもっと興味深い別のオプションがあります。すべての効果に遅延を追加し、前に stop(true) を追加できます。この方法では、ユーザーがタグをすばやく変更するとイベントはキャンセルされますが、ユーザーがオプションをすばやく通過して行くと変更されます。メニュー外。

于 2012-06-04T22:53:24.093 に答える