實現與jQuery的一個bounce
緩動效果,你需要延長限制available easing方法的數量,並添加更多先進的方法。 Here's這是一個插件,它提供了很多很酷的緩動功能。
您也可以複製你需要(如果你不需要的可能性插件帶來的表的整個範圍),並在你的代碼某處其納入放鬆方法:
/* 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>
'this'是指含有一個形式一個div。我試過你的代碼,但控制檯報告'Uncaught TypeError:Object#
這可能是因爲你沒有包含easing插件。你可以在這裏下載它:http://gsgd.co.uk/sandbox/jquery/easing/ – cereallarceny
太棒了。這解決了我的問題。非常感謝你 ! – Jon