CODEWITHSUNDEEP
jquery
craphunter
craphunter

Reputation: 981

Animate() Direction to slide in

Following jQuery:

$("#zero-img" ).animate({ left: (-1)*width_img_size }, "slow" );
$("#zero-img-container").attr("src","");
$("#zero-img").css("left", "150");
$("#zero-img-container").attr("src","/img/newimage.jpg");
$("#zero-img" ).animate({ left: 0 }, "slow" );

The old image is sliding out to the left (Direction <---). The new IMG slides in from the left to the right (Direction --->). Why? How can I change it that the newimage.jpg is silding in like the sliding out effect (Direction <--)?

Of course I took a look to the the api in jquery. But I just don't get it.

Upvotes: 1

Views: 79

Answers (1)

Musa
Musa

Reputation: 97682

The image slides back in from where it is, the left. Your code that sets it to the right executes before you start sliding it out. To set the image on the right after it slides out, use the animate callback, it executes after the animation.

$("#zero-img" ).animate({ left: (-1)*width_img_size }, "slow", function(){
    $(this).css('left', 150);
    $("#zero-img-container").attr("src","/img/newimage.jpg");
} );
$("#zero-img" ).animate({ left: 0 }, "slow" );

Upvotes: 1

Related Questions