Chrome animate issue
<p>I wrote some jquery code to mimic a background scroller. It works fine in all browser except chrome, it seems to lag and only runs smoothly when you click forward and the back again.</p>

<p>The images that are used for sliding are large(2000 x 1000px), will that affect the animation?</p>

<pre><code>$(".x_next_scroll").click(function(){ 
    go_slide_new('forward');
    change_keep_going(0);
}); 

$(".x_prev_scroll").click(function(){ 
    go_slide_new('back');
    change_keep_going(0);
}); 

function go_slide_new(way_){
    var objct = $("#current_image");


    //get the current key for the array
    var next_key = parseInt(objct.attr('alt'))+1;
    var previous_key = parseInt(objct.attr('alt'))-1;
    var current_key = parseInt(objct.attr('alt'));

    //okay just check if they exist...else loop them to the start or end
    if (typeof $('img[alt="'+next_key+'"]').attr('alt') == 'undefined'){next_key = 0;}
    if (typeof $('img[alt="'+previous_key+'"]').attr('alt') == 'undefined'){previous_key = parseInt(slide_images.length-1);}

    var next_next_key = next_key+1;
    var previous_previous_key = previous_key-1;

    if (typeof $('img[alt="'+next_next_key+'"]').attr('alt') == 'undefined'){next_next_key = 0;}
    if (typeof $('img[alt="'+previous_previous_key+'"]').attr('alt') == 'undefined'){previous_previous_key = parseInt(slide_images.length-1);}

    var objct_next = $('img[alt="'+next_key+'"]');
    var objct_prev = $('img[alt="'+previous_key+'"]');

        $('img[alt="'+current_key+'"]').removeAttr('id');

        if(way_ == 'forward'){
            objct_next.attr('id', 'current_image');

            $('img[alt="'+current_key+'"]').animate({ left: '-'+$(window).width()+'px'}, function() {});
            objct_next.animate({ left: '0px'}, function() {});  
                $('.slide_container').children('img[alt="'+previous_key+'"]').remove();
                //add the new layer at the end...
                $(".slide_container").append('&lt;img src="'+slide_images[next_next_key][0]+'" name="'+slide_images[next_next_key][1]+'" alt="'+next_next_key+'" class="slide_images" style="left:'+$(window).width()+'px;" /&gt;');
        }else{
            objct_prev.attr('id', 'current_image');
            $('img[alt="'+current_key+'"]').animate({ left: $(window).width()+'px'}, function() {});
            objct_prev.animate({ left: '0px'}, function() {});  
                $('.slide_container').children('img[alt="'+next_key+'"]').remove();
                //add the new layer at the end...
                $(".slide_container").append('&lt;img src="'+slide_images[previous_previous_key][0]+'" name="'+slide_images[previous_previous_key][1]+'" alt="'+previous_previous_key+'" class="slide_images" style="left:-'+$(window).width()+'px;" /&gt;');         
        }

        $(".slide_images").click(function(){ window.location=$(this).attr('name')});    
}
</code></pre>
