Question

在下面的示例中，我尝试将缓动（easeInCubic）添加到jQuery动画中，但它没有任何效果。为什么呢？

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({ left: 200 }, 'slow', 'easeInCubic');
            });
        });
    </script>
</head>

<body>
    <button>Start Animation</button>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

Answer 1

这里有两个选项：

将以下内容添加到代码的开头，您当前的脚本将按原样运行：

$.extend($.easing, {
    easeInCubic: function (x, t, b, c, d) {
        return (c*Math.pow((t/d),3)) + b;
    }
});

或者，您可以下载 danro的jquery-easing.js，，这是该脚本的来源，其中包括全套的缓动功能。< / p>

Answer 2

easeInCubic功能是jQuery UI库的一部分。您需要在 jQuery 库下面的html中加入。 jQuery 仅包含linear和swing。

Answer 3

你有你的jQuery UI;该库扩展了jQuery easing动画。

快速参考：

缓动功能指定动画进展的速度动画中的不同点。 jQuery核心有两个缓和：线性，在整个过程中以恒定的速度前进动画和swing（jQuery core的默认缓动），这些都在进步在动画的开头和结尾稍微慢一些在动画中间。 jQuery UI提供了几个附加功能缓和功能，从挥杆行为的变化到定制效果，如弹跳。

请参阅：http://api.jqueryui.com/easings/

演示：http://jsfiddle.net/IrvinDominin/kVLzr/

缓解不起作用

3 个答案: