1

ここに私のサイトがあります：

http://www.raceramps.com/v2

右側のメニューにマウスを移動します。Car Service、Trailer Hauling、Show & Display がデフォルトで完全に拡大されていることに注目してください。これは、それらがより売れ行きの良い製品であり、このサイトを閲覧するほとんどの人がそれらを探しているためです。

現在、次のコードを使用したアコーディオン メニューのセットアップがあります。

$(function(){
    $( '.buttonEffectWrapper' ).hover (
        function () {

            var effect = $(this).siblings().filter(":last");
            effect.stop ().animate ( { opacity: 1}, { duration: 300 } );

            $(this).stop().parent().animate({height: "110px"}, {duration: 300 } );//accordion effect here


        },
        function () {
                    var effect = $(this).siblings().filter(":last");
                  effect.stop ().animate ( { opacity: 0}, { duration: 300 } );

                  $(this).stop().parent().animate({height: "30px"}, {duration: 300 } );//accordion effect here

        }
    );
} );

まず、マウスをボタンの 1 つに数回水平に移動すると、キューが作成されます。stop() を使用するとこれを修正できるはずだと思っていましたが、そうではないようです。

次に、マウスが離れたときに最初の 3 つの div (#car-service、#trailer-hausing、#display-and-show) が折りたたまれないようにします。以下を試しましたが、他のすべてが選択されます。

  $(this + ":not(#car-service, #trailer-hauling, #display-and-show)").stop().parent().animate({height: "30px"}, {duration: 300 } );

第 3 に、1 つの div にマウスオーバーしてからその下の div に移動すると、1 つの div が展開され、もう 1 つの div が折りたたまれるため、マウスが意図しない位置に配置されます。これを修正する唯一の方法は、前の div を折りたたまないようにすることです。

したがって、マウスを の上に置いて#car-serviceから に移動した場合#trailer-hauling、#car-serviceは崩壊しないはずです。#trailer-haulingでも からに引っ越したら契約し#show-and-displayたい。#car-serviceこれにより、インターフェイスが壊れるのを防ぐことができます。

4

2 に答える 2

0

最初 にanimate()2 番目のオプション引数で、キューを指定できます。

effect.animate({
    opacity: 1
},{
    duration: 300,
    queue: false
});

これを試し てください：

$(this).filter(function() {
    return !this.id.match(/^(car-service||trailer-hauling||display-and-show)$/);
}).someMethod()...
于 2010-01-04T20:19:03.260 に答える
0 
if(!$(this).is("#car-service, #trailer-hauling, #display-and-show")){
   $(this).parent().animate({height: "30px"}, {duration: 300, queue:false});
}

$(this)DOM 内の単一の要素 (または要素のグループ) を参照します。$(this)セレクターで遊ぶのではなく、特定の属性があるかどうかをテストするか、フィルターするのが最善だと思います。

于 2010-01-04T20:13:51.523 に答える