Неплохими темпами развивается библиотека jQuery. Разработчики уделили внимание визуальным эффектам пользовательского интерфейса. В результате мы получили файл effects.core.js, который сам по себе обладает необходимой функциональностью лучших расширений для jQuery, таких как Color Animation, Class Transformation и Advansed Easing и, кроме того, целый набор различных визуальных эффектов, которые могут быть использованы как автономно, так и с show, hide, toggle.

Итак, давайте для начала посмотрим, как могут быть использованы эффекты, а далее я приведу примеры всех доступных эффектов.

show(effect, options, [speed], [callback])

Возвращает: jQuery
Использует эффект для элемента, чтобы показать этот элемент, если первый аргумент является строкой с названием соответствующего эффекта.

В примере применяется эффект slide чтобы показать элемент div, если совершен клик на параграфе.

$("p").click(function () {
  $("div").show("slide", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

hide(effect, options, [speed], [callback])

Возвращает: jQuery
Использует эффект для элемента, чтобы скрыть этот элемент, если первый аргумент является строкой с названием соответствующего эффекта.

В примере применяется эффект slide чтобы скрыть элемент div, если совершен клик на параграфе.

$("p").click(function () {
  $("div").hide("slide", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

toggle(effect, options, [speed], [callback])

Возвращает: jQuery
Использует эффект для элемента, чтобы переключать этот элемент, если первый аргумент является строкой с названием соответствующего эффекта.

В примере применяется эффект slide чтобы переключать элемент div, если совершен клик на параграфе.

$("p").click(function () {
  $("div").toggle("slide", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

effect(effect, options, [speed], [callback])

Возвращает: jQuery
Использует эффект для элемента (без использования логики show/hide).

В примере применяется эффект explode, если на элементе совершен клик.

$("div").click(function () {
  $(this).effect("explode", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

Мы узнали как можно использовать эффекты, но пока использовали только парочку из них. Давайте теперь подробнее познакомимся с перечнем эффектов и узнаем, какие из них можно использовать автономно, а какие можно применять с show, side и toggle.
Разумеется для начала нам потребуется подключить файл библиотеки jQuery, файл effects.core.js и файл нужного эффекта. Выглядеть это будет примерно так:

<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/effects.core.js" type="text/javascript"></script>
// подключаем файл нужного эффекта
<script src="js/effects.bounce.js" type="text/javascript"></script>

Познакомимся сначала с эффектами, которые можно использовать автономно (без логики show/hide). Таких эффектов четыре – bounce, highlight, shake, transfer.

Bounce

$("#div1").click(function () {
  $(this).effect("bounce", { times: 3 }, 300);
});
$("#div2").click(function () {
  $(this).effect("bounce", { times: 7,
      direction: 'right',
      distance: 50 }, 300);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: up
«up», «down», «left», «right»
distance – Integer – по умолчанию: 20
расстояние в пикселах
times – Integer – по умолчанию: 5
количество раз

Highlight

$("#div1").click(function () {
  $(this).effect("highlight", {}, 1000);
});
$("#div2").click(function () {
  $(this).effect("highlight", {color: '#ff0000'}, 500);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

color – String – по умолчанию: #ffff99
цвет подсветки

Shake

$("#div1").click(function () {
  $(this).effect("shake", { times: 3 }, 300);
});
$("#div2").click(function () {
  $(this).effect("shake", {
      times: 4,
      direction: 'down',
      distance: 10 }, 300);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: left
«up», «down», «left», «right»
distance – Integer – по умолчанию: 20
расстояние в пикселах
times – Integer – по умолчанию: 3
количество раз

Transfer

$("div.green1").click(function () {
  $(this).effect("transfer", { to: "div.red" }, 2000);
});
$("div.green2").click(function () {
  $(this).effect("transfer", { className: "transfer2",
      to: "div.red" }, 800);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

className – String
Имя класса (опционально), которое можно назначить отображению трансформируемого элемента вместо стандартного «ui-effects-transfer».
to – String
jQuery селектор, определяющий элемент в который происходит трансформация.

Ну а теперь перечислим эффекты, которые можно использовать вместе с Show/Hide/Toggle:

Blind

$("#div1").click(function () {
  $(this).hide("blind", {direction:"vertical"}, 1000);
});
$("#div2").click(function () {
  $(this).hide("blind", {direction:"horizontal"}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: vertical
«vertical» или «horizontal»

Clip

$("#div1").click(function () {
  $(this).hide("clip", {direction:"vertical"}, 1000);
});
$("#div2").click(function () {
  $(this).hide("clip", {direction:"horizontal"}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: vertical
«vertical» или «horizontal»

Drop

$("#div1").click(function () {
  $(this).hide("drop", { direction: "left" }, 1000);
});
$("#div2").click(function () {
  $(this).hide("drop", { direction: "down" }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: left
«left», «right», «up», «down»

Explode

$("#div1").click(function () {
  $(this).hide("explode", {}, 1000);
});
$("#div2").click(function () {
  $(this).hide("explode", { pieces: 25 }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

pieces – Integer – по умолчанию: 9
количество штук.

Fold

$("#div1").click(function () {
  $(this).hide("fold", {}, 1000);
});
$("#div2").click(function () {
  $(this).hide("fold", { size: 50 }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

size – Integer – по умолчанию: 15
размер в пикселах.

Puff

$("#div1").click(function () {
  $(this).hide("puff", {}, 1000);
});
$("#div2").click(function () {
  $(this).hide("puff", { percent: 700 }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

percent – Integer – по умолчанию: 150
Количество процентов.

Slide

$("#div1").click(function () {
  $(this).hide("slide", { direction: "left" }, 1000);
});
$("#div2").click(function () {
  $(this).hide("slide", { direction: "down" }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: left
«left», «right», «up», «down»

Scale

$("#div0").click(function () {
  $(this).hide("scale", {}, 1000);
});
$("#div1").click(function () {
  $(this).effect("scale", { percent: 0 }, 1000);
});
$("#div2").click(function () {
  $(this).effect("scale", {
        percent:200,
        direction:'horizontal'}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: both
‘both’, ‘vertical’, ‘horizontal’
from – Object
Начальное состояние. Обычно не требуется. { height: .., width: .. }
origin – Array – по умолчанию: ['middle','center']
Точка исчезновения, по умолчанию для show/hide
percent – Integer – по умолчанию: 0/100
Количество процентов.

Pulsate

$("#div1").click(function () {
  $(this).effect("pulsate", { times: 2 }, 1000);
});
$("#div2").click(function () {
  $(this).effect("pulsate", { times: 9 }, 50);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

times – Integer – по умолчанию: 5
Количество пульсаций.

Все использованные в примерах файлы, как и файл effects.core.js можно скачать в разделе download.

Надеюсь, что эта статья принесет пользу и поможет многим сделать свои приложения более динамичными.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru