2

非表示のサブメニューがあるメニューがあります。

メニューアイテムにマウスオーバーするとサブメニューが開き、マウスアウトするとサブメニューが閉じるようにアニメーション化しています。

ユーザーが多くのメニュー項目の上にマウスを置くと、すべてのアニメーションがキューに入れられます。

キューイングの問題を解決するために、アニメーションの前に stop() を追加しました。

これにより、サブメニューの高さがマウスアウト時のサイズに縮小するというさらに悪い問題が発生しました。

4

5 に答える 5

7

クロージングアニメーション終了後に高さを自動に設定することで解決しました。

function leftMenuOut() {
    var obj = $(this).find(".toggleThisLevel2");
    if (obj.length == 0) {
        return true;
    }
    $(this).removeClass("opened");
    obj.stop().animate({ height: "hide" }, { queue: false, complete: function() { $(this).css("height", "auto"); } });
    return false;
}

非表示にしている要素にパディングがある場合、パディングも縮小することがわかります。包含要素を追加し、代わりにその高さを変更しますが、パディングやマージンを追加しないでください。

于 2009-12-15T11:45:18.377 に答える
1

これはjQuery1.7.2で修正されたバグでした：http：//bugs.jquery.com/ticket/8685

于 2012-05-11T20:13:07.930 に答える
0

Google でこの質問を見つけましたが、これらの修正はどれもうまくいきませんでした。問題をどのように修正したかについて言及する必要があります。

これが私の元のコードです：

elem1.stop().slideUp();
elem2.find("div.page:nth-child(" + myVar + ")").stop().slideDown();

これにより、すばやく前後に切り替えると高さが途切れてしまうことがありました。

次に、slideDown の.hide()後に追加しました.stop()

elem1.stop().slideUp();
elem2.find("div.page:nth-child(" + myVar  + ")").stop().hide().slideDown();

そして今、高さが跳ねたり、途切れたりすることはありません。これが将来誰かに役立つことを願っています！

于 2013-05-08T17:34:57.260 に答える
0

トグル機能を使ってみませんか？ul 要素の高さを元の高さに戻す必要があると思います。現時点では、高さはスタイル属性にとどまっているため、ul には、マウスを要素の外に移動した高さしかありません。

于 2009-12-15T10:23:13.170 に答える
0

メニューが開いているかどうかを格納する変数を格納できます。

メニューセットvar menuOpening = true;にカーソルを合わせて開くと、開いているアニメーションにコールバックがあり、メニューを開くmenuOpening = false;かどうかを確認し、false の場合にのみ新しいメニュー項目を開くことができます。

次に、これをいじって、より見栄えの良いものを得ることができます。以前に同様の作業を行ったことがありますが、コードが見つかりません。

于 2009-12-15T10:24:24.117 に答える