How do I rorate images without waiting for the animation to end?

Question

I need to modify this plugin to rotate images without waiting for animation to end. If you visit that link you might notice that animation restarts at the the end of previous animation but i want images back to back so i dont want to wait for end of the first animation to start next one. Any idea how to do that. Relevant code snippet from that 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 am reposting the question to see if I can get code snippets on how to do it.

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

Answer 1

You basically need to duplicate the images in your container, making the width twice as much as initially. After that, you should scroll the container so that when one set of images is completely hidden, you reset the container position transparently.

Here is the code:

//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
...

The function:

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 ;            
        });
    }
}