Question

I’m currently using jQuery and am looking for a way to slide an image left as a new image slides left into its place.

Specifically, I have a static image of an iphone. When I click a link, I need the current image displaying on the iphone’s image viewer to slide out to the left as the new image slides in from the right. Oftentimes these images and their names and paths will be generated on the fly and so won’t be able to exist in the DOM beforehand.

I’d prefer a solution that could be applied unobtrusively.

I know jquery has slideUp and slideDown. why don’t they have left and right?

Answer 1

jQuery provides an animate() method that allows you to create custom animations. It takes four arguments:

1. A map of style properties and values
2. An optional speed
3. An optional easing type
4. An optional callback function

So to move something to the left you can do this:

$('#pic').animate({left:500}, 'slow'); 

Of course pic would have its CSS position set to absolute or relative so that the new value takes effect.

#pic {     position:absolute;     left:100px;     top:10px; }