jquery之如何在不等待动画结束的情况下旋转图像

我需要修改这个插件以旋转图像而不等待动画结束。如果您访问该链接，您可能会注意到动画在上一个动画结束时重新启动，但我希望图像背靠背，所以我不想等待第一个动画结束才能开始下一个动画。知道如何做到这一点。该插件的相关代码片段是

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

另一位用户添加了同样的问题。我正在重新发布该问题，看看是否可以获得有关如何执行此操作的代码片段。

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

请您参考如下方法:

您基本上需要复制容器中的图像，使宽度是最初的两倍。之后，您应该滚动容器，以便当一组图像完全隐藏时，您可以透明地重置容器位置。

这是代码:

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