1

単純divに、ボタンをクリックするとアニメーション化され、別のボタンをクリックすると非表示になるはずのがあります。

<div id="popup"></div>
<input type="button" value="show and animate popup" onClick="showWithAnimation()" />
<input type="button" value="hide" onClick="aFunction()" />



<script>           
function showWithAnimation(){    

               console.log('animation called');
               $('#popup') .animate({top:(($(window).height()/2)-($('#popup').outerHeight()/2))-70}, 1000, 'easeOutBounce');
           $('#popup').show();
           }

         function aFunction(){//Hide the div

              $('#popup').hide();

          }
</script>

私が気付いたのは、バウンス効果がdiv最初にクリックしたときにのみ適用されshow and animate popup、次にhideボタンをクリックしてからもう一度show and animate popupボタンをクリックすると、divが表示されますが、easeOutBounce効果はありません。それを解決する方法を教えてもらえますか？よろしくお願いします。

4

2 に答える 2

1

アニメーションが発生しない理由は、div が既に最終的な目的地にあるためです。そのため、その目的地にアニメーション化しようとすると、単に移動しません。

div を非表示にする代わりに元の位置にアニメートした場合、または非表示にした後で元の位置にジャンプした場合でも、アニメーションのバウンスは希望どおりに再び発生します。

また、アニメーション化した後ではなく、アニメーション化する前に div を表示する必要があります。

その他の注意事項:

通常、HTML ファイルでインライン コードを使用しないことがベスト プラクティスと見なされます。代わりに、ID またはクラスを参照する外部ファイルを使用して、イベント ハンドラーを適用することをお勧めします。これにより、HTML と JavaScript が読みやすくなり、トラバースしやすくなるだけでなく、事後の変更が容易になります。

HTMLファイル

<script src="externaljsfile.js"></script>
<div id="popup"></div>
<input id="showButton" type="button" value="show and animate popup" />
<input id="hideButton" type="button" value="hide" />

JSファイル

$( document ).ready( function() { // runs code once the DOM has loaded
   var $popup = $( '#popup' );

   $( '#showButton' ).click( function() {
      $popup.show();
      $popup.animate( {
         top: ( ( $( window ).height() / 2 ) - ( $popup.outerHeight() / 2 ) ) - 70
      }, 1000, 'easeOutBounce' );
   } );

   $( '#hideButton' ).click( function() {
      // move back to original position here.
      $popup.hide();
   } );
} );
于 2012-09-25T16:39:12.990 に答える
1

アニメーションを実行すると、div がページ上の特定の位置にあるため、これが発生していると思いますが、再実行すると、div は既にターゲット位置にあるため、アニメーション/効果がないように見えます起こっている。それは起こっています、それはあなたがそれをアニメーション化しようとしているところです。top最初にとスタイルを特定の値に設定する必要がありleftます...おそらくウィンドウの上部中央です。次に、あなたはあなたanimateのように電話します。このように、ポップアップを表示するためにクリックするたびに、ポップアップの位置は常に同じ場所で始まり、同じ場所でアニメーション化/終了します。

したがって、次のものが必要です。

$("#popup").css({"top": "whatever", "left": "whatever"}).animate("whatever", "whatever", "whatever").show();

アップデート：

を使用するanimateと、選択した要素が元の値から文字どおりアニメートされ、渡されたプロパティが設定されます。したがって、あなたの場合、topとleftスタイルをアニメーション化しています。デフォルトでは、div はページのどこかに配置されています。あなたの場合、それは非表示で、HTML の真ん中のどこかにあると思います。技術的にtopはleft未定義ですが、実際には「200、250」などの有限値です。animate を呼び出すと、元の値 (200、250) からanimate呼び出しで指定した値に徐々に変更されます。したがって、最初のanimate呼び出し、div をウィンドウの中央に移動 (アニメーション化) します。次に、ポップアップを閉じる (非表示にする) ことを許可します。その後、クリックしてポップアップを開くたびに、div をウィンドウの中央に移動 (アニメーション化) しようとしますが、既にそこにあります (非表示になっているだけです)。したがって、div を既にある位置に移動しようとしているため、アニメーションは「ありません」。繰り返しますが、テストで気づいたように、これは最初の後にのみ発生することに注意することが重要です。既に目的の位置に移動されています。ポップアップを開いて閉じ、ウィンドウのサイズを変更してから、ポップアップを再度開いた場合、何らかのアニメーションが表示されるはずです (最小限の可能性)。animate

于 2012-09-25T16:40:40.603 に答える