.show() и .hide()
добавляют или удаляют свойство display:none в атрибут
в качестве парпметров можно передавать длительность операции в мс и функцию обратного вызова, кот исполняется по завершению операции
//пример раз
$('.foo').hide(2000,function(){
alert("Усе готово, шеф!");
});
//пример два
$('.foo')
.css({
"background":"yellow",
"border":"2px solid green"
})
.hide(1500, function(){
$('.foo').show(2000);
});
//вариант вставки скрипта в html
<script type='text/javascript'>
$(function (){
$('.foo').hide(2000,function(){
alert("Усе готово, шеф!");
});
});
</script>
.fadeIn(), .fadeOut() и .fadeTo()
плавное появление и исчезновение элемента. Первые два работают с display:none, третий с opacity до указанного значения. Для первых двух есть строковые параметры fast (200мс) и slow (600мс). Доппараметры - время, для третьего - прозрачность и функция обратного вызова
$("form")
.fadeOut(8000, function(){
alert("Крыша уехала)");
})
.fadeIn(8000, function(){
alert("Крыша вернулась");
console.log("Крыша вернулась");
})
.fadeTo(8000, 0.5, function(){
alert("Ой, я исчезаааююю...");
});
.slideUp(), .slideDown(), .slideToggle()
уменьшение высоты блока до нуля (display:none), разворачивание блока (убирает display:none), .slideToggle() сам определяет в заисимости от исходного состяния скрывать или показывать блок. Необязательные параметы - длительность анимации и функция обратного вызова. fast (200мс) и slow (600мс)
$("p.foo")
.slideUp(2000, function(){
alert("Блок скрыт");
})
.slideDown(2000, function(){
alert("Блок восстановлен");
})
.slideToggle("slow", function(){
alert("Блок снова скрыт");
});
.animate()
параметр easing - способ выполнения анимационного перехода. По умолчанию поддерживает "linear" и "swing"
Возможные аргументы:
способ 1 - набор анимируемых элементов в формате JSON + три необязательных - длительность, формула, описывающая функцию изинга и функция обратного вызова
способ 2 - набор css свойств в формате JSON + набор параметров в формате JSON
Пример способ 1
$("#bar")
.css({
"background":"grey",
"border":"4px solid lime"
})
.animate({
"width":"120%",
"height":"100px"
},
5000,
"swing",
function(){
alert("И как оно тебе - правда, классно?");
});
Пример способ 2
$("#bar")
.css({
"background":"blue",
"border":"3px dotted red"
})
.animate({
"width":"60%",
"height":"70px"
},
{
"duration":"6000",
"easing":"swing",
"complete":function(){
console.log("Анимация завершена");
}
});
Пример способ 2 с использованием всех доступных возможностей
step - запускается после каждого этапа анимации
queue - указывает, должна ли анимация включаться в текущую очередь (следующая анимация начнется только после того как закончится предыдущая)
specialEasing позволяет присоединять к каждому из анимируемых css свойств различные стили изинга
$("#bar")
.css({
"background":"yellow",
"border":"5px solid purple"
})
.animate({
"width":"500px",
"height":"100px"
},
{
"duration":"9000",
"easing":"swing",
"complete":function(){
console.log("Анимация завершена")
},
"step":function(){
console.log("Этап завершен")
},
"spеcialEasing":{
"width":"linear"
}
})
.queue(function(){
console.log( "Animation complete." );
$( this ).dequeue(); //это должно быть внутри функции
});
.delay()
Длительность паузы между анимациями
$("#bar")
.css({
"background":"olive",
"border":"5px solid teal",
"width":"400px"
})
.slideUp(1000)
.delay(6000)
.slideDown(2000, function(){
alert("Готово");
});
.stop()
остановка анимации, два булевых параметра - очистка очереди и переход в конец анимации - оба по умолччанию false
var count = 0;
$("#bar")
.css({
"background":"yellow",
"border":"5px solid purple"
})
.animate({
"width":"700px"
},
{
"duration":"6000",
"step":function(){
if (count++==200)
{
$(this).stop(true,true);
}
}
});