jQuery缓动弹跳动画

Question

I am trying to add a bounce effect to my animation but am having trouble doing so. I have been following the jQuery API animate() page but I keep failing. I am trying to create an effect where my object slides in from the top and bounces before settling into place.

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

Answer 1

我不确定您希望弹跳什么元素，但​​是请尝试以下操作：

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

Answer 2

To Achieve a bounce easing effect with jQuery, you would need to extend the limited number of available easing methods and add more advance ones. Here's a plugin for that which offer many cool easing functions.

You can also copy the easing method which you need (if you don't need the whole range of possibilities the plugin brings to the table) and incorporate it somewhere in your code:

/* 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;
        }
    }
});

Demo:

 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>