循环

我最近碰巧需要在圆圈中为某个元素制作动画。在此之前，我从未想过 jQuery 还没有为此提供一个明显的解决方案。因此，我找到了一种方法，并将其做成了一个插件。

查看演示   下载文件

赋能理念

这是一个 jQuery 插件，因此显然它依赖于 jQuery 库。具体来说，是 jQuery 1.4 或更高版本，因为我们使用的是 .animate() 函数的新功能，即可以 按属性设置缓动效果。这意味着我们可以使用一个缓动函数为“top”值制作动画，同时使用另一个缓动函数为“left”值制作动画。关于缓动效果的所有这些讨论……我应该说，这不仅需要 jQuery 1.4+，还需要 缓动插件。以下是其原理

因此，如果我们执行四次此操作，翻转缓动函数并根据需要进行加减，我们就可以得到一个圆圈。实际上，不仅仅是圆圈，而是由高度和宽度定义的任何椭圆。

功能

您可以声明速度、高度和宽度。对于像这样的插件，这些参数非常明显/标准/预期。不过还有另外三个参数

• sizeAdjustment：百分比调整。默认为 100（保持不变）。小于 100 = 在中途缩小到该百分比，然后恢复。大于 100 = 在中途增大到该百分比，然后减小。
• loop：默认为 false。True 表示循环将递归运行。您可以通过仅使用单个字符串参数在该元素上调用插件来停止当前循环：$(“#thing”).circulate(“stop”);
• zIndexValue：接受四个数值的数组。这些值在动画的四个点上设置 z-index CSS 属性。

以下是完整集合

$("#anything").circulate({

    speed: 400,                  // Speed of each quarter segment of animation, 1000 = 1 second
    height: 200,                 // Distance vertically to travel
    width: 200,                  // Distance horizontally to travel
    sizeAdjustment: 100,         // Percentage to grow or shrink
    loop: false,                 // Circulate continuously
    zIndexValues: [1, 1, 1, 1],  // Sets z-index value at each stop of animation

});

测试版

按现状，我将称之为测试版发布。主要是因为它在 Opera 中运行效果不佳。如果有人是 Opera 的忠实粉丝并且想要找出问题所在，我洗耳恭听。

它也是测试版，因为我还没有收到很多反馈，所以我希望对收到的任何反馈做出反应，并在必要时进行更改。例如，我认为回调函数参数可能是个好主意。此外，我相信有些部分可以写得更高效一些。

查看演示   下载文件