Move an image to the position of a DIV using jQuery 1.3.x

Question

I have a number of small images that I display that are the size of an icon (32x32). I want to animate them from their current position on the page to the x,y of a DIV anytime someone clicks on any of the images. What is the best route to do this using jQuery?

Answer 1

If I understand the question correctly, then you can change the css properties to that of the image. I.e. contain the images within the div and move the div to the location of the clicked icon.

$("#divname").css({'width' : '32', 'height' : '32' , 'left' : 'IMAGELEFT', 'top' : 'IMAGETOP'});

Assuming I understand the question.

EDIT:

To move the image to the div:

$("#image").click(function(){
  $(".block").animate({'left': 'DIVPOSITION', 'top', 'DIVPOSITION'}, 'slow', function() {
 $("#div").html("<img src=\"THEIMAGE\">");
   });
 );
});

Answer 2

It looks like there are already some jquery plugins that do what you're looking for.

From the link, CJ Object Scaler should be able to make sure that your images fit within the specified size. JQUERY IMAGE MAGNIFY handles animation and transparency with images.

Answer 3

Ok just from the top of my head, you can use the offset() function to get the x and y coordinates of both the image and the div you want the image to move to. offset().left and offset().right.

Then I also think you'll need to make sure the image is positioned absolutely for this to work correctly. Then just use the animate() function on the image element and add the new x and y position in the animate() function, to make the image go there.

Go to docs.jquery.com and read up on the parameters the animate() function need.

I'll try and come up with code examples if you're struggling.