Jquery Image Animation from one location to another

Question

Hi All ,

I want to do a simple image animation.Assume that there is small image of 100*100 pixel image at location A. I want to move the image from location A to location B and maximize the at location B.

I have both the dimension images small and large. I don't want to increase the width and height of image itself. I have a separate image for showing large one.

I have seen this kind of effect in flash , flex. If user clicks on image A it maintains the transition so that user doesn't loose the context.

I will have 20 images in a grid and a left panel to hold the big image. Whenever you click any image on the grid , it gets refresh the left panel with all the details about that image.Right now i am just replace the left panel with big image. can you please give me any directions how to achieve this transition

Answer 1

Images cannot actually fade into other images; you need to fake it.

Have one of the images floating the other using CSS. One should be hidden, and one should be visible. When you want to switch between the two, fade the hidden one in to be visible as you fade the visible one out to be hidden.

This Image Cross Fade Transition article discusses different methods of how to do this with jQuery :)