2

私はクライアントが使用しているカスタム プレーヤーを持っていますが、彼らが私にくれた JavaScript は悪いです...本当に悪いです。ゼロからやり直す必要は本当にないので、元のコードを使用できると思いました

var togglePlayer = function(){
        $('.jp-gui').slideUp();
        $('#jp_container, #jp_container2').hover(
            function () {
                $('.jp-gui').slideDown();
            },
            function () {
                $('.jp-gui').slideUp();
            }
        );
    };

私はこれでそれを修正しようとしました:

var togglePlayer = function(){
        $('.jp-gui').slideUp();
        $('#jp_container, #jp_container2').hover(
            function () {
                $(this + '.jp-gui').slideDown();
            },
            function () {
                $(this + '.jp-gui').slideUp();
            }
        );
    };

今では、ホバーを受け入れないようになっています。.toggleSlide で完全に書き直したところ、ホバーの問題は修正されましたが、さらに 10 個の問題が発生しました。

#jp_container にカーソルを合わせたときに #jp_container2 のホバーアニメーションが表示されないようにする簡単な修正方法を知っている人はいますか?

4

2 に答える 2

3 
$('#jp_container, #jp_container2').hover(function() {
    $(this).find('.jp-gui').stop(true, true).slideToggle();
});
于 2012-12-10T22:41:13.387 に答える
0 
        function () {
            $(this + '.jp-gui').slideDown();
        },

thisは、jQuery イベント ハンドラーのコンテキストでは、ハンドラーがアタッチされた (またはイベント委任の場合は委任された) DOM 要素です。それを文字列に変換してもうまくいきません。

試す：

        function () {
            $('.jp-gui', this).slideDown();
        },

(その場合、2 番目の引数はコンテキストと呼ばれます) または

        function () {
            $(this).find('.jp-gui').slideDown();
        },

代わりは。.jp-gui両方とも、イベント ターゲット (#jp_containerまたは) 内のすべての要素を選択します#jp_container2。

さらに変更したい場合は、

#jp_container, #jp_container2[id^="jp_container"](ID が指定された文字列で始まるすべての要素を選択します)に置き換えることができます。両方のコンテナーに共通のクラスを追加すると、さらに効果的です。

slideUpまた、@Michael が指摘したように、 /のペアはslideDown単一の に置き換えることができますslideToggle。これは常に最良の解決策であるとは限りませんが、コードを短縮します。

@Michael は、前のアニメーションを で停止することも提案していstop(true, true)ます。アニメーションを停止しないと、現在のアニメーションがキューに追加された後、次のアニメーションが遅れます。これにより、複数のホバー イベントが生成された後に要素が繰り返し上下にスライドする可能性があります。コンテナーのサイズが変更された場合、またはその子がコンテナーをエスケープした場合、 がなくstopても、各アニメーションが追加のホバー イベントをトリガーすると、無限ループが発生する可能性さえあります。

于 2012-12-11T04:55:52.820 に答える