Пример:
Первая кнопка показывает, как работает анимация. Пример показывает, как расширяется элемент 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://slyweb.ru/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 мс. Функция ведёт себя «вне очереди», это означает, что анимация автоматически стартует не ожидая своей очереди.
Пример:
Пример использования параметра функции 'easing', обеспечивающего различную анимацию. Пример будет работать, если вы подключили соответствующее дополнение, обеспечивающее данную анимацию.
Пример:
Пример использования функции обратного вызова (callback). Первый аргумент это массив CSS свойств, второй - заданное значение времени анимации - 1000 мс, третий - используемый Палагин, и четвертый аргумент - анонимная функция обратного вызова (callback).