В jQuery существует замечательная функция
animate, с помощью которой можно создать пользовательские визуальные эффекты. Функция способна в заданное время плавно изменять CSS свойства объекта.
Синтаксис
.animate(properties, options);
Набор CSS свойств properties
properties – это набор CSS свойств, значения которых принимает объект в результате выполнения функции
animate. CSS свойства и их значения помещаются в круглые скобки, а между собой разделяются запятыми:
{css свойство : значение , css войство : значение, css свойство : значение}
Пример 1
<div id="object"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#object").animate({left:"+=400px"},2000);
});
</script>
Объект ”object”, после выполнения функции
animate изменит свое местоположение относительно левой части экрана, на значение которое
= текущее положение+400 px. Анимация длиться 2000 миллисекунд.
Пример 2
<div id="object"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#object").animate({opacity:"hide"},2000);
});
</script>
В результате выполнения объект медленно исчезнет в течении 2000 миллисекунд, за счет изменения свойства
opacity, которое станет равным 0.
Пример 3
Соединив два свойства получим эффект исчезновения с движением.
<div id="object"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#object").animate({opacity:"hide",left:"+=400px"},2000);
});
</script>
Набор опций options
После CSS свойств, следуют необязательные опции, где можно задать скорость выполнения анимации, ускорение, функцию, которая вызывается в конце анимации и др. Опции перечисляются через запятую, и имеют следующий формат :
{опция : значение, опция : значение, опция : значение}
Существуют следующие опции:
duration – время в течение, которого длится анимация. Значение можно указать в миллисекундах, а также с помощью специальным ключевым словом:
fast,
slow.
<div id="object"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#object").animate({left:"+=400px"},{duration:"slow"});//С помощью ключевого слова;
$("#object").animate({left:"+=400px"},{duration:2000});//С помощью миллисекунд;
});
</script>
easing – с помощью данной опции можно придать ускорение выполнения анимации. Опция имеет два значения
linear и
swing (по умолчанию).
<div id="object"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#object").animate({left:"+=400px"},{duration:2000,easing:"linear"});
$("#object").animate({left:"+=400px"},{duration:2000,easing:"swing"});
});
</script>
При значении
linear скорость анимации всегда прямолинейна, т.е. остается без изменений. В отличие от linear,
swing, меняет ускорение анимации. В начале происходит увеличение, а в конце снижение скорости анимации
complete – в данную опцию помещается функция, которая будет вызвана после завершения анимации. К примеру, можно сделать вызов сообщения, всплывающее после завершения анимации.
<div id="object"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#object").animate({left:"+=400px"},{duration:2000,easing:"swing",complete:function(){alert("Animate complete");}});
});
</script>
step – функция, которая выполняется после каждого шага анимации.