jquery - 如何将 'easeOutBack' 缓动与 Velocity.js 一起使用

Question

我正在使用veloicty.js为我的网站上的元素添加动画效果。我几乎可以使用除 easeOutBack 之外的任何其他缓动方法。我想我读到除了“弹跳”效果之外，所有内容都包含在库中。

我还将 jqueryui 包含到我的项目中，作为最后的努力，看看这是否有帮助。运气不好。

这是我正在使用的:

$('element').mouseenter(function (event) {
    $(this).find('h2').velocity({
        'top': 20
    }, {
        'duration': 300,
        'easing': 'easeOutBack'
    });

或者，我是否需要通过使用 2 个速度调用来手动创建该效果。一个让元素的位置超过 20，然后另一个回到 20？

Answer 1

如 the docs 中所述:

Pre-packaged into Velocity are jQuery UI's easings, except for the back, bounce, and elastic easing types.

很遗憾，您不会有任何运气使用 easeOutBack 缓动。

但是，由于它是一个简单的预定义三次贝塞尔曲线，您可以简单地使用它的值来生成效果，使用:[0.175, 0.885, 0.32, 1.275] 作为 easing 选项。