【问题标题】：jQuery easing Bounce animationjQuery 缓动弹跳动画
【发布时间】：2012-06-29 01:35:10
【问题描述】：

我正在尝试为我的动画添加反弹效果，但在这样做时遇到了麻烦。我一直在关注jQuery API animate() page，但一直失败。我正在尝试创建一种效果，使我的对象从顶部滑入并在固定到位之前弹跳。

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我不太确定您希望反弹的具体元素是什么，但试试这个：

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

这需要 jQuery Easing 插件。更多info、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>

【讨论】：

this 指的是包含表单的 div。我试过你的代码，但控制台报告Uncaught TypeError: Object #<Object> has no method 'easeOutBounce'。
这可能是因为你没有包含缓动插件。你可以在这里下载：gsgd.co.uk/sandbox/jquery/easing
很高兴听到这个消息！如果您也将答案标记为正确，我将不胜感激，以便将来对其他人有所帮助！
抱歉，这是 10 分钟的计时器。我将在 2 分钟内将问题标记为正确。
我也想知道你是否可以控制效果的弹性。目前，弹跳太僵硬了。

【解决方案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;
        }
    }
});

演示：

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>

【讨论】：