2

アニメーションにバウンス効果を追加しようとしていますが、うまくいきません。jQuery API animate() ページをたどっていますが、失敗し続けています。オブジェクトが上からスライドして所定の位置に収まる前に跳ね返るエフェクトを作成しようとしています。

$(this).animate( {
        "top": "+=100px"
    }, { 
        duration: '400',
        specialEasing: {
            width: 'linear',
            height: 'easeOutBounce'
        },
    }
);
4

2 に答える 2

5

具体的にどの要素をバウンスさせたいのかよくわかりませんが、これを試してください：

$(this).animate({ "top" : "+=100px" }, 400, "easeOutBounce");

これには、jQuery Easingプラグインが必要です。詳しくは、githubまたはCDNをご覧ください。

デモ：

$("#target").animate({ "top" : "+=100px" }, 400, "easeOutBounce");
#target{ position:absolute; left:50px; top:50px; background:red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<div id='target'>Hellow World<div>

于 2012-06-29T01:38:39.103 に答える
0

bouncejQuery でイージング効果を実現するには、限られた数の使用可能なイージングメソッドを拡張し、より高度なイージング メソッドを追加する必要があります。これは、多くのクールなイージング機能を提供するプラグインです。

必要なイージング メソッドをコピーして (プラグインがテーブルにもたらす可能性の全範囲を必要としない場合)、コードのどこかに組み込むこともできます。

/* jQuery easing */
jQuery.extend( jQuery.easing,{
    def: 'easeOutQuad',
    easeOutBounce: function (x,t,b,c,d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    }
});

デモ：

function bounceDown(){
  $('.ball').animate({top:150}, 1000, 'easeOutBounce', onEnd);
}

function onEnd(){
  $(this).animate({top:0}, 500, 'easeOutCubic', bounceDown);
}

bounceDown();
.ball{ 
  background:red; 
  border-radius:50%;
  display: inline-block;
  padding:30px;
  position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

<div class='ball'></div>

于 2017-10-10T10:39:23.217 に答える