Help with jQuery Rotator

Question

I need to change this plugin to rotate images without waiting for the animation to finish. If you visit this link, you may notice that the animation restarts at the end of the previous animation, but I want the images to go backward, so I do not want to wait until the first animation is finished to start the next one. Any idea how to do this. The corresponding code snippet from this plugin is

el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {
    // reset container position
    $(this).css({ left:$("div#imageScroller").width(), right:"" });
    // restart animation.
    // Problem is to restart it when last image completely appears with out pausing current animation.
    animator($(this), duration, "rtl");  //hide controls if visible
    ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;
});  

The same question was added by another user. I tried the question if I can get code snippets on how to do this. This is very relevant.

link - http://nettuts.s3.amazonaws.com/300_jquery/image%20Scroller/imageScroller.html

Answer 1

, , . , reset .

:

//remove js-disabled class
...

//create new container for images
...

//add images to container
...

// Duplicate container contents
var container = $("div#container");
container.html( container.html() + container.html() ) ;
container.width( 2 * container.width() ) ;

//work out duration of anim based on number of images (1 second for each image)
...

//store speed for later (distance / time)
...

//set direction
...

//set initial position and class based on direction
...

:

var el = $("div#container") ;
var parent = el.parent();
var margins = parseInt(parent.css('padding-left'),10) + parseInt(parent.css('padding-right'),10)
        + parseInt(el.css('margin-left'),10) + parseInt(el.css('margin-right'),10)
        + parseInt(el.css('padding-left'),10) + parseInt(el.css('padding-right'),10)
//animator function
var animator = function(el, time, dir) {

    //which direction to scroll
    if(dir == "rtl") {
        var parent = el.parent();
        var limit = parent.width() - el.width() + margins ;

        //add direction class
        el.removeClass("ltr").addClass("rtl");
        //animate the el
        el.animate({ left: limit+"px" }, time, "linear", function() {
            //reset container position
            $(this).css({ left:(parent.width()-el.width()/2), right:"" });
            //restart animation
            animator($(this), duration/2, "rtl");
            //hide controls if visible
            ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;            
        });
    } else {
        var parent = el.parent();
        var limit = 0 - margins ;

        //add direction class
        el.removeClass("rtl").addClass("ltr");
        //animate the el
        el.animate({ left: -limit + "px" }, time, "linear", function() {
            //reset container position
            $(this).css({ left:(-el.width()/2), right:"" });
            //restart animation
            animator($(this), duration/2, "ltr");
            //hide controls if visible
            ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;            
        });
    }
}