jQuery animate method

All the methods we've covered in previous lessons are somewhat limited - they do exactly what they were created for. If you need more control over animation, use the universal method animate.

The first parameter of this method is an object in which you should set new values of CSS properties that you want to animate. And the second parameter is the time of execution of the animation.

Let's implement this method using the following HTML code:

<button id="button">click me</button>
<div id="elem">text...</div>

Let the CSS look like this:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

Let's make it so that when we click the button, the element shrinks to the following dimensions: height - 50px, width - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

If you specify the value in this format height: '+=50', then the animation will work like this: 50px (in our case) will be added to the current height value and the element will be smoothly animated to the new value. Let's look at an example:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

For more information about the animate method, see the jQuery reference.

animate

There is such a layout:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

Make it so that when you click on a div with #block, its width increases to 200px in 1100ms.

Use the layout from the first task. Make it so that each time you click on the div with #block, its width increases by 200px, and each such increase occurs in 900px.

Use the layout from the first task. Make it so that each time you click on the div with #block, its width and height increase by 100px, and each such increase occurs in 950px.

Use the layout from the first task. Make it so that each time you click on the div with #block, it moves to the right by 100px and each such movement happens for 700px.