Question

I’m try to create a sliding banner with jquery here.

I tried to code in this manner

    .post(this,{ajax : 1}, function(data){
    var oldImage = $('div.banner > img');
    var newImage = $(data).insertAfter(oldImage).css('position','absolute').css('left',800);
    newImage.load(function(){ 
oldImage.animate({left:-800},'medium',function(){});    newImage.animate({left:0},'medium',function(){
oldImage.remove();
    });
});
});
return false;

However, the transition between the 2 images is not smooth, and there seem to have
a little gap between the 2 image when the old image slide away, and the new image
slide in. I assume is because there is a lag between the execution of image.
Do you guys have any tips on how I can better do this?

Answer 1

What you have should work alright. The perceived lag is probably the image not actually being 800px wide. Since you’re animating 800px left and 800px right for the new/old image, if they aren’t actually that wide, there’ll be a gap in there.

You can either use the slide effect for this, or adjust the left amounts to be the correct size for the images, e.g. via .width().

For the gap “lag” and the width, you can see what I mean here. There’s a large gap, but only because the left property of 800px is larger than the 275px image in the example.