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

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 2

也许jCarousel会为您做到这一点？

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!