javascript - 非常简单的jquery动画优化

Question

我写了一个简短的 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>

Answer 1

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

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

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

更新

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

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