How can I both move a div and resize it with animation effect at JQuery?

Question

How can I both move a div and resize it with animation effect at JQuery?

i.e. div will be at the middle of screen and it will go to the left side and will have %50 of its height and %50 of its width after it completed its move.(It will have for example %75 of its size at the middle of its way)

EDIT: I tried that:

$(".block").animate({"left": "-=100px", "height": "-=30%", "width":"-=30%" }, 1000);

However it disappears?

EDIT2: This works:

$(".block").animate({"left": "-=100px", "height": "30%", "width":"30%" }, 1000);

However it makes my square more bigger, I try =-30% but doesn't work. What should I do getting smaller instead of getting bigger?

Answer 1

Seems like the last line is setting the height and width css properties to 30%. You expect it to be 30% of the previous sizes, but it actually is 30% of the nearest sized parent of the block, which seems to be larger than the previous size.

I don't think there is a simple way to resize to a given percentage of the previous size (like a special syntax in animate or so). I assume you have to code a javascript function that calculates the new width from the old one.

Given that you only want to resize one element, I strongly suggest that you use the element ID instead of its class. Then the following line should do what you want:

$("#block").animate({"left": "-=100px", "height": $("#block").height()*0.5, "width":$("#block").width()*0.5 }, 1000);