0

私は現在、小さなナビゲーションメニューを作成しています。これらのドロップダウンメニューの1つで、展開するカテゴリが1つ必要です。できます。ただし、jQuery .hide（'slow'）を使用してカテゴリを撤回すると、非表示にするアニメーションの最後で非表示にするメニューが1回点滅し、その後適切に非表示になります。

これが私の問題を説明するための以下のコードです：

$(document).ready(function(){

    var verif = false;

        $("a").hover(function() {

        var texte = $(this).text();
        var tab = new Array;
        tab = texte.split("      ");
            if (tab[0] === "+ Deroule" && verif === false) {
                    $("#submenu").show("slow");
                    verif = true;
            }
            else if (tab[0] === "+ Deroule" && verif === true) {
                        $("#submenu").hide(8000);

 //There, I can clearly see, at the end of the hide animation, the previously opened content blinking once before it hides completely.

                                                     verif = false;
                }                                               
        }); 
});
4

1 に答える 1

1

HTML / CSSが表示されない場合、問題を実際に特定することは困難です-ヒントヒントはフィドルヒントヒントを作成します:)-しかし、私があなたである場合、最初に行うことは、.hover()メソッドを.mouseenter()and .mouseleave()（NOT.mousein()および.mouseout()-です）に変更することです。 IEサポートに関する別の会話-慣れていない場合は、jQueryのサイトで調べることができます/調べる必要があります）。

なぜこれをするのですか？このメソッドは実際には/.hover()の省略形ですが、さまざまな理由（2つの完全なメソッドほど広くサポートされていないという事実を含む）により、正しく機能しない場合があります。これがこの状況での問題であることを保証することはできませんが、特にこれはブラウザの問題であると思われるため、基本に戻って可能な限り多くのサポートから始めるのが常に最善です。.mouseenter().mouseleave()

編集：

あなたの単純化されたフィドルを見た後、私はあなたの問題が何であるか、そしてあなたが何をしようとしているのかについてよりよく理解したと思います。私は以前に同じ問題を抱えていましたが、私の経験から、それを説明するのは実際には難しい問題であると言えます。

.show()要素は、、、スライド、およびフェードメソッドを使用して表示/非表示にするとジャンプし.hide()ます。これは、アニメーションが完了するとすぐに要素がフローから削除されるためです（ほとんどのブラウザーでは、クロムではなく、表示/非表示メソッドによって要素が縮小されることはありません）。何もないところまでずっとあるので、まだ途切れがあります）。この問題に対する私の最新の解決策は次の2つです。

ある状況では、メニュー内に表示の多いボタンと表示のないボタンを作成する必要がありました。これにより、要素が一度に1つずつスムーズに表示/非表示になります。表示するコレクションでshow/hidden、slide、またはfadeメソッドを呼び出そうとすると、それらはすべて同時にアニメーション化され、コールバックで実行しようとすると同じことが起こります。さらに、このアニメーションは一度に複数のアイテムで呼び出されるため、スライドメソッドは機能しません。そのため、多くのオーバーヘッドが発生し、低速のブラウザ（およびFFでは少しでも）で効果が途切れます。表示/非表示メソッドは、実際には要素のサイズを縮小するため、一部のブラウザーでは機能しましたが、他のブラウザーでは途切れ途切れであるため、表示されませんでした（事実上、アニメーションはすべてのブラウザーで「完了」しません-上記を参照）。したがって、私には3つの選択肢が残されました。

解決策1:( 指定された仕様で）当時の最良の解決策であった元の計画は、animateメソッドを使用して、ラッパーを単純にスライドさせることでしたdiv（ターゲット要素のオフセットに基づいて上または下にoverflow設定）hiddenリスト内）。これはうまく機能しましたが、フェード効果を使用して、各要素を連続して非表示にする必要がありました。この方法を選択する場合は、代わりにスライド方法を使用することをお勧めします-リンクの表示を増やしたり減らしたりすることを試みていないので、これは問題にはならないはずです（はい、これはおそらく次のように聞こえないことを私は知っていますリンクの表示を増やす/減らすには問題がありますが、私がそれを実装する方法では、スライドが実際に問題を引き起こしました）。

解決策2： すべてが同時にフェードするため、フェードを単独で使用することは問題でした。フェードが終了しなかったとしても、フェードが終了するとアニメーションはジャンプします。したがって、私が解決する必要のある最初の問題は、同時に実行されるアニメーションでした。タイマーの使用はオーバーヘッドのため問題外だったので、呼び出し間の必要な遅延を計算した後、コレクション内の各要素のフェードを再帰的に呼び出す関数を作成しました（指定された速度引数と要素の数に基づいて色あせます）。次に、アニメーションが完成した後も、ジャンプの問題を解決する必要がありました。これを修正するために、.fadeTo()メソッドを実装しました。これにより、アニメーション後のドキュメントのフローに要素が保持されます。ただし、これによりさらに2つの問題が発生しました。

  1. この.fadeTo()方法はIEではサポートされていません（9と10の可能性があります-思い出せません）
  2. アニメーションの後、要素がフローから削除されていないため、多くの空きスペースがありました

最初の問題を解決するために、IEのブラウザー固有のメソッドを追加しました。このメソッドはdisplay、各要素のプロパティをに設定し、フェードアウトが完了するblockと、フェードインが開始される直前にその逆を行いました。 visibilityhidden

前に説明したアニメーション方法を使用して、2番目の問題を解決しました。これを機能させるには、アニメーションの特定の速度と表示/非表示の要素の数に基づいて、コンテナがスライドするのに必要な速度を計算する別の補助メソッドを作成する必要がありました。


これが非常に詳細であったことは知っていますが、これをどのように行うのが最善かを判断するのに役立つことを願っています。

実装を進める際に、質問がある場合や説明が必要な場合はお知らせください。幸運を！:)

于 2012-10-26T14:13:02.197 に答える