2

我写了一个简短的简单 Jquery 动画代码。它采用 rel 属性并将其用于每个 li.slide 的动画输入。它有效，但我觉得这可能不是最好的方法。可以简化/优化还是没关系？

谢谢

Javascript / Jquery 年轻人

$('.slide', this).each(function() {
    var rel = $(this).attr('rel');
    var coord = rel.split(',');

    var $delay = parseInt(coord[2]);
    var $transition = coord[3];
    var $duration = parseInt(coord[4]);

    $(this).delay($delay).animate({'background-position-x' : '50%', 'background-position-y' : '0', opacity : '1'},$duration, $transition);

 });

HTML 示例：

<li class="slide" rel="50%,300px,600,linear,200"></li>
4

1 回答 1

1

一件小事是使用 data-* 属性而不是 rel。html5doctor.com

您也可以跳过使用 jQuerys animate 函数并在动画之外进行所有计算。保存计算数组并​​使用 setInterval 函数对其进行迭代。这也将为不仅使用补间的更具创造性的开发打开大门。

我在 github 上发布了一些你可以免费使用的作品。查看动画。它是一个具有简单界面的动画复杂计算库。

更新

刚刚创建了一个 JavaScript，您可以按原样使用或从中获得灵感。

https://github.com/erik-landvall/animator

于 2012-04-27T18:54:21.883 回答