0

jQuery で独自のアニメーション ドロップダウン メニューを作成しようとしていますが、奇妙な結果が得られます。ボタン DIV とメニュー DIV をラップするコンテナーがあり、(マウスオーバー時に) コンテナー DIV とメニュー DIV の両方の高さを調整し、メニュー DIV が CSS {'display', 'block'} を取得するようにするというアイデアでした。コンテナー DIV (ボタンとメニュー DIV の両方を含むように高さがスケーリングされているはず) のマウスアウトで、DIV を元の高さに戻し、メニュー DIV で CSS {'display','none '}。

問題は、すべてが拡大された後、おそらく拡大されたコンテナ (高さ: 300px) のマウスアウトで縮小するのではなく、コンテナの元の高さ (高さ: 100px) のマウスアウト後にスケーリングが開始され、新しいものではありません。

コードは次のとおりです。

$('.container').mouseover(function(){
    $('.bob').css('display','block');
    $('.bob').animate({height: '200px'});
    $(this).animate({height: '300px'});
});

$('.container').mouseout(function(){
    $('.bob').animate({height: '0'},
            function(){
            $('.bob').css('display','none');
            });
    $(this).animate({height: '100px'});
});
4

2 に答える 2

0

これが役立つかどうかはわかりませんが、JQueryアニメーションの問題の多くは解決しました。

要素でアニメーションを作成する前に、その要素がすでにアニメーション化されているかどうかを確認することをお勧めします。あなたはこのコードでそれを行うことができます

if( $(elem).is(':animated') ) {...}

これがあなたを助けることができることを願っています

于 2012-08-15T14:48:31.570 に答える
0

変更された状態の「ライブ」 .container 要素を取得するには、おそらく on イベントを使用する必要があります。マウスアウト/マウスオーバーを再度行う前にアニメーションが終了しなかった場合に備えて、アニメーションを停止する stop() 関数も追加しました。

$(document).on('mouseover', '.container', function(){
    $('.bob').css('display','block');
    $('.bob').stop(true, false).animate({height: '200px'});
    $(this).stop(true, false).animate({height: '300px'});

});



$(document).on('mouseout', '.container', function(){
    $('.bob').stop(true, false).animate({height:0},
         function(){
            $('.bob').css('display','none');
         });
    $(this).stop(true, false).animate({height: '100px'});
});

編集：ここで要求されたように説明：

これは、変更された dom 要素や、後で js によって dom に追加された要素をリッスンする JQuery で (現在は非推奨になっている) live() 関数を使用するようなものです。$('.container').mouseover() のみを使用すると、ページの読み込み時の状態で dom 要素をリッスンします。高さはわずか 100 ピクセルです。要素が変更されたことを「認識」しません。

停止機能があるため、現在進行中の要素のアニメーションは、新しいアニメーションが開始する前に停止されます。

http://api.jquery.com/on/

http://api.jquery.com/stop/

于 2012-08-15T14:57:47.463 に答える