Question

I have set images to a height and width of 100px using CSS, but I would like the height and width to change to 400px when I click on the image, but I also want it to animate the change.

I’ve started my attempt with this:

$('img').click(function() {
  $('img').animate({
    height: '400px',
    width: '400px',
  }, 5000, function() {
  });
});

EDIT: Sorry about the type, and the objective is to only animate the image being selected.

ALSO: here is the link to the site I am trying to get this to work on. Click on OUR WORK, and then click on a thumbnail. I want the image to resize on click. CLICK HERE.

Answer 1

Use this inside the handler function to specify the current image, also you can use numbers instead of strings for the properties to be animated, also you have height twice instead of witdh and height.

$('img').click(function() {
  $(this).animate({
    height: 400,
    width: 400,
  }, 5000, function() {
  });
});