CODEWITHSUNDEEP
jquery
drummer392
drummer392

Reputation: 473

Image CSS Change onClick with Animation Jquery

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.

Upvotes: 0

Views: 1653

Answers (2)

Shmiddty
Shmiddty

Reputation: 13967

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

1) You want to use this instead of 'img' for your internal selector, otherwise when you click one image, all images will be animated.

2) you included height twice.

Upvotes: 0

Musa
Musa

Reputation: 97672

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() {
  });
});

Upvotes: 3

Related Questions