演示：

Question

我正在尝试为我的动画添加一个反弹效果，但我很难这样做。我一直关注着jQuery API animate() page，但我一直都在失败。我正在尝试创建一个效果，我的对象从顶部滑入并在安装到位之前反弹。

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

Answer 1

我不太清楚你希望反弹的具体元素，但试试这个：

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

Answer 2

要使用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;
        }
    }
});

演示：

＆＃13;

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

＆＃13;

.ball{ 
  background:red; 
  border-radius:50%;
  display: inline-block;
  padding:30px;
  position:relative;
}

＆＃13;

<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>

＆＃13;

jQuery缓动Bounce动画

2 个答案:

演示：