Metoda animate v jQuery

Všechny metody, které jsme probírali v předchozích lekcích, jsou poněkud omezené - dělají přesně to, pro co byly vytvořeny. Pokud potřebujete více kontroly nad animací - použijte univerzální metodu animate.

První parametr tato metoda přijímá objekt, ve kterém je třeba nastavit nové hodnoty CSS vlastností, které chcete animovat. A druhým parametrem - čas trvání animace.

Pojďme implementovat tuto metodu na následujícím HTML kódu:

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

Nechť CSS vypadá takto:

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

Pojďme zařídit, aby po kliknutí na tlačítko se prvek zmenšil na následující rozměry: výška - 50px, šířka - 100px:

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

Pokud zadáte hodnotu v tomto formátu height: '+=50', pak animace bude fungovat takto: k aktuální hodnotě výšky bude přidáno 50px (v našem případě) a prvek bude plynule animován na novou hodnotu. Podívejme se na příklad:

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

Podrobnosti o metodě animate naleznete v referenci jQuery.

animate

Existuje takové rozložení:

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

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

Zařiďte, aby při kliknutí na div s #block se jeho šířka zvětšila na 200px za 1100ms.

Použijte rozložení z prvního úkolu. Zařiďte, aby při každém kliknutí na div s #block se jeho šířka zvětšila o 200px a každé takové zvětšení proběhlo za 900px.

Použijte rozložení z prvního úkolu. Zařiďte, aby při každém kliknutí na div s #block se jeho šířka a výška zvětšily o 100px a každé takové zvětšení proběhlo za 950px.

Použijte rozložení z prvního úkolu. Zařiďte, aby při každém kliknutí na div s #block, se posunul doprava o 100px a každý takový posun proběhl za 700px.