jQuery API: Effects – эффекты
Категория JavaScripts (jQuery, AJAX)
Сегодня мы посмотрим анимационные эффекты jQuery. Если вы понятия не имеете что такое jQuery, тогда советую для начала посмотреть урок по jQuery
Basics:
show()
Отображает каждый из элементов набора, если они были скрыты через вызов hide() или через display:none в таблице стилей. Действует подобно show(speed,[callback]), только без анимационных эффектов. Если элемент не был скрыт, то ничего не происходит.
Показываем все параграфы, которые были скрыты.
$("p").show();
show(speed, [callback])
Отображает все элементы набора с использованием анимационных эффектов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Высота, ширина и прозрачность каждого элемента набора может быть изменена динамически, с определенной скоростью.
Аргумент speed – строка или число. Если передается строка, она может принимать предопределенные значения – “slow”, “normal” или “fast”. Число – длительность эффекта в миллисекундах, например 1000.
Аргумент callback – функция, вызываемая по завершении эффекта. Выполняется один раз для каждого элемента набора.
Показываем все скрытые параграфы. Используем в качестве параметра ключевое слово slow. При этом анимация выполняется в течение 600 миллисекунд.
$("#button1").click(function () {
$("#p1").show("slow");
});
hide()
Скрывает каждый из элементов набора, если они отображались. Действует подобно hide(speed, [callback]), но без анимационных эффектов. Если элемент был скрыт – ничего не происходит.
hide(speed, [callback])
Скрывает все элементы набора с использованием анимационных эффектов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Высота, ширина и прозрачность каждого элемента набора может быть изменена динамически, с определенной скоростью.
Скрываем все видимые параграфы. Используем в качестве параметра ключевое слово slow. При этом анимация выполняется в течение 600 миллисекунд.
$("button").click(function () {
$("p").hide("slow");
});
jQuery эффекты, описания функций. Нажмите на кнопку, чтобы скрыть этот текст
toggle()
Переключает отображение каждого из элементов набора. Если они были скрыты – отображает их и наоборот.
Переключаем параграфы с помощью кнопки.
$("button").click(function () {
$("p").toggle();
});
Toggle() – отображать/неотображать
Sliding:
slideDown(speed, [callback])
Открывает все элементы набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.
$("p").click(function () {
$("div").slideDown();
});
раскрыть
slideDown принимает те же аргументы, что и show или hide.
slideUp(speed, [callback])
Скрывает все элементы набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.
чтобы скрыть
slideToggle(speed, [callback])
Переключает видимость всех элементов набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.
Скрываем и отображаем все параграфы.
$("button").click(function () {
$("p").slideToggle("slow");
});
Toggle() – отображать/неотображать
Fading:
fadeIn(speed, [callback])
Делает видимыми все элементы набора, используя изменение прозрачности элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому “проявляемый” элемент уже должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.
“Проявляем” скрытые элементы div один за другим, каждый раз анимационный эффект занимает время примерно в 600 мс.
$("button").click(function () {
$("div").fadeIn("slow");
});
fadeOut(speed, [callback])
Делает невидимыми все элементы набора, используя изменение прозрачности элементов (эффект “затухания”). Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому скрываемый элемент должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.
Скрываем все параграфы, используя эффект “затухания”. Продолжительность эффекта примерно 600 мс.
$("p").click(function () {
$("p").fadeOut("slow");
});
fadeOut – эффект “затухания”
fadeTo(speed, opacity, [callback])
Делает невидимыми все элементы набора, используя изменение прозрачности элементов (эффект “затухания”) до величины, указанной во втором аргументе. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому скрываемый элемент должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.
Кликом на параграфе изменяем его прозрачность до 0.33. Эффект длится примерно 600 мс.
$("p").click(function () {
$(this).fadeTo("slow", 0.33);
});
Кликните мышью fadeTo – эффект “затухания” до 0.33
fadeTo принимает те же аргументы, что и show или hide. И кроме того второй аргумент opacity – число от 0 до 1, характеризующий “целевую” прозрачность элемента.
Custom:
animate(params, [duration], [easing], [callback])
Это функция для построения своей, пользовательской анимации. У этой функции один обязательный аргумент, представляющий собой объект состоящий из пар ключ/значение. В качестве ключа выступает CSS-свойство, которое должно быть анимировано (например: “height”, “top”, or “opacity”).
Обратите внимание, что свойства должны быть определены с использованием camel case (т.е. например marginLeft вместо margin-left).
В качестве значения выступает “целевое” значение соответствующего CSS-свойства. Например, если в качестве значения выступает какая-либо цифра, то соответвующее свойство будет трансформировано из своего текущего состояния, в новое состояние.
Обратите внимание, что поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или “hide”, “show”, “toggle”). Например backgroundColor не поддерживается.
Начиная с версии jQuery 1.2 можно определять значения свойств, используя “em” или %. Также начиная с версии jQuery 1.2 можно использовать “относительную” анимацию, т.е. определять значения соответствующего свойства относительно его текущей позиции (используя “+=” или “-=”) чтобы передвигать элемент в положительную или отрицательную стороны.
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
Кликните по кнопке, чтобы запустить анимацию для элемента div.
Пример “относительной” анимации. Покликайте несколько раз по кнопкам вправо/влево…
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
Аргументы, принимаемые этой функцией:
params – набор атрибутов стилей, которые Вы хотите анимировать.
duration (Optional) – строка, представляющая собой ключевое слово (“slow”, “normal”, или “fast”) или число, указываюее длительность эффекта в миллисекундах.
easing (Optional) – строка, представляющая собой имя эффекта плагина easing. Имеет два встроенных значения “linear” и “swing”. Используется только с плагином.
callback (Optional) – функция, которая может быть вызвана по завершении анимации каждого элемента набора.
stop()
Останавливает все выполняющиеся анимационные эффекты для всех элементов набора.
Если, что-либо непонятно смотрите исходный html код данной страницы, скачайте js скрипты страницы и посмотрите и спрашивайте в комментах
]]>Добавить в закладки
Теги: jQuery, полезное, программирование, юзабилити
1 комментарий по “jQuery API: Effects – эффекты”
-
]]>
]]>
сказал:
февраля 4, 2010 в 22:48Спасибо за статью, давно искал что-то про jQuery простое и понятное. Вроди нашёл.
Извините за оффтоп, на одном сайте вы сказали:
“от себя добавлю что если ваш сайт без www надо сразу перед индексацией роботами следует создать robots.txt с host: свой сайт и убрать редиректы. Иначе вордпресс будет передавать яндексу 301 заголовок ”
МОжно с этого места поподробней. А то блог выпал из индекса яндекса, и я подозреваю, что причина может быть эта. С хостом вроди понятно, а откуда поубирать редиректы?
Оставьте комментарий: