2012-06-29 122 views
2

我試圖給我的動畫添加一個彈跳效果,但我在這樣做時遇到了麻煩。我一直在關注jQuery API animate() page,但我一直在失敗。我試圖創造一種效果,讓我的物體從頂部滑入並在穩定到位之前反彈。jQuery緩動彈跳動畫

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

回答

5

我不太知道什麼元素的明確你希望反彈,但試試這個:

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

'this'是指含有一個形式一個div。我試過你的代碼,但控制檯報告'Uncaught TypeError:Object#沒有方法'easeOutBounce''。 – Jon

+1

這可能是因爲你沒有包含easing插件。你可以在這裏下載它:http://gsgd.co.uk/sandbox/jquery/easing/ – cereallarceny

+0

太棒了。這解決了我的問題。非常感謝你 ! – Jon

0

實現與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>