Эффекты в JQuery
Сегодня я хочу продемонстрировать библиотеку JQuery со стороны визуального оформления сайта. Библиотека обладает большим набором визуальных эффектов, с которыми сайт приобретёт свою неповторимость и динамичность просмотра.
Для начала посмотрим как могут быть использованы эффекты, а затем я приведу их список.
show(effect, options, [speed], [callback])
Показывает элемент с помощью эффекта (effect).
В данном примере используеться эффект slide чтобы показать элемент div, когда совершаеться клик по параграфу. Пример…
1 2 3 | $("p").click(function () { $("div").show("slide", {}, 1000); }); |
В этом примере элемент div скрываеться. Пример…
1 2 3 | $("p").click(function () { $("div").hide("slide", {}, 1000); }); |
Эффект toggle используеться чтобы показывать div когда он скрыт и скрывать когда виден. Пример…
1 2 3 | $("p").click(function () { $("div").toggle("slide", {}, 1000); }); |
В этом примере к элементу div применяеться эффект explode. Пример…
1 2 3 | $("div").click(function () { $(this).effect("explode", {}, 1000); }); |
Аргументы:
effect — String — Название эффекта.
options — Hash — Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) — String, Number — Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) — Function — Функция, которая может быть вызвана при завершении эффекта.
Ознакомившись с общими чертами использования эффектов, приступим к обзору других эффектов. Разберём сначала те эффекты которые можно использовать без show/hide/toggle. Таких эфекта четыре: bounce, highlight, shke, transfer.
Эффект bounce. Представляет из себя эффект отскакивающего мячика. Атрибут times — количество движений, direction — направление анимации, distance — расстояние движения. Пример…
1 2 3 4 5 | $("#div1").click(function () { $(this).effect("bounce", { times: 7, direction: 'right', distance: 50 }, 300); }); |
Эффект highlight. На примере, при клике, подсвечивает div цветом #ff0000. Пример…
1 2 3 | $("#div1").click(function () { $(this).effect("highlight", {color: '#ff0000'}, 500); }); |
Эффект shake. Передвигает и возвращает на место div. Атрибут times — количество повторов, direction — направление начала движения, distance — расстояния перемещения элемента. Пример…
1 2 3 4 5 6 | $("#div1").click(function () { $(this).effect("shake", { times: 4, direction: 'down', distance: 10 }, 300); }); |
Эффект transfer. Трансформирует один элемент в другой. Атрибут className — String
Имя класса (опционально), которое можно назначить отображению трансформируемого элемента вместо стандартного «ui-effects-transfer», to — String jQuery селектор, определяющий элемент в который происходит трансформация. Пример…
1 2 3 4 | $("div.green1").click(function () { $(this).effect("transfer", { className: "transfer2", to: "div.red" }, 800); }); |
Теперь рассмотрим эффекты которые используються с show/hide/toggle. Первое — название, с ссылкой на страницу с примером данного эффекта, затем идут атрибуты и их описание.
Blind — direction: «vertical» или «horizontal».
Clip — direction: «vertical» или «horizontal».
Drop — direction: «vertical» или «horizontal».
Explode — pieces: количество штук.
Fold — size: размер в пикселах.
Puff — percent: Количество процентов.
Slide — direction: «left», «right», «up», «down».
Scale — direction: ‘both’, ‘vertical’, ‘horizontal’, from: начальное состояние. Обычно не требуется. { height: .., width: .. }, origin: ['middle','center'] точка исчезновения, по умолчанию для show/hide, percent: количество процентов.
Pulsate — times: количество пульсаций.
Нет комментариев на "Эффекты в JQuery"
Нет комментариев.
Вы можете продолжить обсуждение этой статьи на форуме