2

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

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

2 回答 2

5

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

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

这需要jQuery Easing插件。更多信息，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>

于 2012-06-29T01:38:39.103 回答
0

要使用 jQuery 实现bounce缓动效果，您需要扩展有限数量的可用缓动方法并添加更多高级方法。这是一个提供许多很酷的缓动功能的插件。

您还可以复制所需的缓动方法（如果您不需要插件带来的所有可能性）并将其合并到代码中的某个位置：

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

于 2017-10-10T10:39:23.217 回答