Question

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

由于

Javascript / Jquery youngster

$('.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

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

我在github发表了一些你可以自由使用的作品。查看animasies。它是一个复杂的动画库，具有简单的界面。

更新

刚刚创建了一个可以使用的JavaScript或者受到启发的JavaScript。

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

非常简单的Jquery动画优化

1 个答案:

更新