Question

I have written a short simple Jquery animation code. Which takes the rel attribute and uses it for animation inputs for every li.slide.
It works but I feel it may not be the best way to do this. Can it be simplified / optimised or does it not matter?

Thanks

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 example:

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

Answer 1

A smal thing would be to use data-* attribute instead of rel. html5doctor.com

You could also skip using jQuerys animate function and do all youre calculations outside the animation. Save an array of the calculations and iterate them with setInterval function. This will also open doors for a more creative development that doesn’t only use tweens.

I have published some work at github that you are free to use. Check out animasies.
It’s a library of complex calculations ment for animations with a simple interface.

Update

Just finished creating a JavaScript that you may use as it is or get inspired by.

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