1

在以下示例中，我尝试将缓动 ( 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>
4

3 回答 3

2

您在这里有两个选择：

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

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

  2. 或者，您可以下载danro的jquery-easing.js，这是该脚本的来源，其中包括全套缓动函数。

于 2013-09-20T17:57:28.990 回答
1

该easeInCubic功能是jQuery UI库的一部分。您需要在jQuery库html下方包含在您的右侧。jQuery只包含和。linearswing

于 2013-09-20T17:55:29.133 回答
0

你已经包含了 jQuery UI；该库扩展了 jQueryeasing动画。

快速参考：

缓动函数指定动画在动画中不同点的进展速度。jQuery 核心附带了两种缓动：线性，在整个动画中以恒定的速度进行，以及摇摆（jQuery 核心的默认缓动），它在动画的开始和结束时比在动画中间的进展稍慢。jQuery UI 提供了几个额外的缓动函数，从摆动行为的变化到自定义效果（如弹跳）。

见：http ://api.jqueryui.com/easings/

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

于 2013-09-20T17:59:50.343 回答