Clever Geek Handbook

Js horizontal slide effect

I am currently using jQuery and I am looking for a way to slide the image to the left when the new image slides to the left into place.

in particular I have a static iphone image. when i click the link i need the current image displayed in the iphone image viewer to slide to the left when the new image slides to the right. often these images and their names and paths will be generated on the fly and therefore cannot exist in the DOM beforehand.

I would prefer a solution that can be applied unobtrusively.

I know jquery has slideUp and slideDown. why didn't they leave and are wrong?

+1


source to share


4 answers


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

  • Style property and value map
  • Extra speed
  • Additional type of attenuation
  • Additional callback function

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



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

Of course the pic will have the CSS position set to either absolute or relative, so the new value will take effect.

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


source


maybe jCarousel will do it for you?



+2


source


You can achieve this with the excellent Cycle plugin . However, this may be a little more than you actually need in this case.

+1


source


Both of these plugins are great, I've used them before. There is a great script for working with the loop plugin and flickr to have them on your site. Pretty neat.

Try what Andy and Andrew said. Good luck!

+1


source






More articles:


All Articles