Perform a custom animation of a set of CSS properties.
все эффекты анимации в jQuery крутятся вокруг функции animate – данная функция берет один или несколько CSS свойств элемента и изменяет их исходного до конечного за N-ое количество итераций (количество итераций зависит от указанного времени, но не реже одной итерации в 13ms (если я правильно накопал это значение)).
Функция animate понимает следующие параметры:
- params – описание CSS свойств элемента, до которых будет происходить анимация (т.е. есть у нас div с высотой 100px – говорим animate({height:200}) – и высота плавно изменяется до 200px)
- duration – скорость анимации – указываем в миллисекундах, или используя ключевые слова “fast” = 200ms, “normal” = 400ms или “slow” = 600ms
- easing – указываем какую функцию будем использовать для наращивания значений, на выбор “linear” или “swing” (хотите больше см. Easing Plugin)
- callback – функция, которая будет вызвана после окончания анимации
$(document).ready(function(){
$("#block").click(function(event){
$(this).animate({
width: "+=50px", // наращивание параметра записывается именно так
height: "+=50px",
fontSize: "+=2px"
},1500);
});
});
Вечно растущий при клике кубик
_____________________________________________________________________________________
