js horizontal slide effect

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

maybe jCarousel will do this for you?

Answer 2

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

Answer 3

You may be able to achieve this with the excellent Cycle plugin. However it might be a bit more than you really need in this case.

Answer 4

Both of those plugins are great, I have used both before. There is a great script to work with the cycle plugin and flickr to have them on your site. Pretty neat.

Try out what Andy and Andrew said. Best of luck!

Answer 5

Thanks Vincent, that was exactly what I was looking for and since I've never worked with jQuery package I didn't even know it could do that it works much easier than mootools for that particular action. Thanks again!