Ключевой аспект данной функции – объект стилевых свойств который анимируется. Каждый ключ внутри представляет свойство стиля, которое подлежит анимации (например: "height", "top", or "opacity"). Учтите, что свойства должны быть обозначены без пробела, последующее слово с большорй буквы, т.е. "marginLeft" вместо "margin-left." Переменная связанная со свойством представляет конечный результат свйоство, которое будет анимировано. Если значение свойства стиля заданно определенным значением, свойство стиля затем переходит из текущего его значения в новое значение. Функция ведёт себя по-другому, если свойство представлено как "hide", "show", или "toggle", анимация будет создана по умолчанию.
Пример:
Первая кнопка показывает, как работает анимация. Пример показывает, как расширяется элемент div (90% width) в то время как свойство font-size возрастает. Как только свойство font-size изменится, начинается анимация рамки. Вторая кнопка начинает аналогичную цепочку анимации, где каждая анимация будет стартовать как только анимация предыдущего элемента завершится.
"jQuery"
$("#go1").click(function(){
$("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
.animate( { fontSize:"24px" }, 1500 )
.animate( { borderRightWidth:"15px" }, 1500);
});
$("#go2").click(function(){
$("#block2").animate( { width:"90%"}, 1000 )
.animate( { fontSize:"24px" } , 1000 )
.animate( { borderLeftWidth:"15px" }, 1000);
});
$("#go3").click(function(){
$("#go1").add("#go2").click();
});
$("#go4").click(function(){
$("div").css({width:"", fontSize:"", borderWidth:""});
});
"HTML"
<button id="go1"> Animate Block1</button>
<button id="go2"> Animate Block2</button>
<button id="go3"> Animate Both</button>
<button id="go4"> Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
"CSS"
div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#go1").click(function(){
$("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
.animate( { fontSize:"24px" }, 1500 )
.animate( { borderRightWidth:"15px" }, 1500);
});
$("#go2").click(function(){
$("#block2").animate( { width:"90%"}, 1000 )
.animate( { fontSize:"24px" } , 1000 )
.animate( { borderLeftWidth:"15px" }, 1000);
});
$("#go3").click(function(){
$("#go1").add("#go2").click();
});
$("#go4").click(function(){
$("div").css({width:"", fontSize:"", borderWidth:""});
});
});
</script>
</head>
<body class="iframe">
<button id="go1"> Animate Block1</button>
<button id="go2"> Animate Block2</button>
<button id="go3"> Animate Both</button>
<button id="go4"> Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
</body>
</html>
<style>
div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
</style>
Пример:
Анимировать все параграфы, переключая css свойства height и opacity, анимация занимает 600 мс.
Пример:
Анимировать все параграфы, css свойство left установить как 50 и свойство opacity как 1 (непрозрачный, видимый), анимция выполяется в течение 500 мс. Функция ведёт себя «вне очереди», это означает, что анимация автоматически стартует не ожидая своей очереди.
"jQuery"
$("p").animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });
Пример:
Пример использования параметра функции 'easing', обеспечивающего различную анимацию. Пример будет работать, если вы подключили соответствующее дополнение, обеспечивающее данную анимацию.
"jQuery"
$("p").animate({
"opacity": "show"
}, { "duration": "slow", "easing": "easein" });
Пример:
Пример использования функции обратного вызова (callback). Первый аргумент это массив CSS свойств, второй - заданное значение времени анимации - 1000 мс, третий - используемый Палагин, и четвертый аргумент - анонимная функция обратного вызова (callback).
"jQuery"
$("p").animate({
height:200, width:400, opacity: .5
}, 1000, "linear", function(){alert("all done");} );
