4

私はdivをアニメーション化していますが、そのアニメーションに何らかの効果を与えたいので、このように試しました

$('#slider').stop().animate({"margin-right": '0'}, 'slow','easeOutBounce');

easeOutBounceが機能しません。間違っていますか? しかし、それ以外はすべて機能しています。

以下のようなjquery効果も試しました

$('#slider').stop().animate({"margin-right": '0'});
$('#slider').effect( "bounce", "slow" );

しかし、エフェクトを使用すると、最初の行のアニメーション機能でさえ機能しません

アニメーションでバウンス効果を実現するには?

4

4 に答える 4

8

答えが受け入れられたことは知っていますが、イージング関数を増やすだけでは、jQuery UI はかさばりすぎます。https://github.com/ai/easings.netにあるより小さな eases.net スクリプトを使用することをお勧めします。jQuery の animate() を呼び出す前に、デフォルトのイージング関数を設定するだけです (例を参照)。animate() メソッドからイージング パラメーターを除外します。

jQuery.easing.def = 'easeOutBounce';

$('#slider').animate({"margin-left": '200'}, 'slow');
#slider {
  width:100px;
  height:100px;
  background-color:#ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<div id="slider"></div>

于 2017-01-21T22:30:26.990 に答える
3

HTMLページに次のライブラリを含めます

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

jquery UIの詳細

于 2013-06-05T10:41:50.803 に答える