0

これが私が話しているウェブサイトです：http://benjaminpotter.org/clients/c3carlingford/

そのため、メニュー項目にカーソルを合わせるとポップアップが表示されるメニューを作成しています。

ここに画像の説明を入力

だから私はそれをアニメーション化するためのJavaScript（jQuery）関数を書きました：

$(".info").css({"opacity": "0", "margin-top": "10px"}).hide(0);

$("#menu-item-51").mouseenter(function(){

    $(".nav1").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-51").mouseleave(function(){

    $(".nav1").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-11").mouseenter(function(){

    $(".nav2").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-11").mouseleave(function(){

    $(".nav2").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-12").mouseenter(function(){

    $(".nav3").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-12").mouseleave(function(){

    $(".nav3").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-13").mouseenter(function(){

    $(".nav4").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-13").mouseleave(function(){

    $(".nav4").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-14").mouseenter(function(){

    $(".nav5").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-14").mouseleave(function(){

    $(".nav5").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-15").mouseenter(function(){

    $(".nav6").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-15").mouseleave(function(){

    $(".nav6").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

最初に、コードが多いという問題があります...しかし、機能します...

それで、問題は何ですか？

問題はこれです：

ここに画像の説明を入力

すべてのリンクの上でマウスを前後に移動すると、カスケードします。クールなのはわかっていますが、クライアントはそれが好きではありません。私もそうではないです。

では、動作を改善するにはどうすれば変更できますか?

私はそれが次のように動作することを望みます:

ここに画像の説明を入力

ドロップダウンに同じものがない場合: マウスオーバー、カスケード...

ここで彼らのサイトをチェックできます: http://thecity.org/

4

2 に答える 2

1

あなたのmouseleaveイベントでは.hide()、jQuery のメソッドを使用します。メニューアイテムを離れた後に要素を非表示にしたいと思っているだけですか？

問題を説明するために簡単なフィドルを作成しました。結果はこちら

幸運を！

于 2012-02-18T06:31:56.073 に答える
1

コード内のすべての場所を変更stop(0)してみてください。stop(true, true)期待どおりに動作するはずです。

true両方の引数をmethod に渡すstopことで、前のアニメーションのキューを確実にクリアし、まだアニメーション中の場合は強制的にすばやく完了させます。

stop(clearQueue, jumpToEnd)- 一致した要素で現在実行中のアニメーションを停止します。

于 2012-02-18T06:38:28.450 に答える