Взаимодействия

• Draggable — Предоставляет элементу возможность быть перемещенным с помощью мыши (см. Drag & Drop)

• Droppable — Контролирует где перетаскиваемый элемент может быть брошен (см. Drag & Drop)

• Resizable — Предоставляет возможность динамически изменять размеры элемента с помощью мыши

• Selectable — Предоставляет возможность выделять один или несколько элементов пользовательского интерфейса из группы

• Sortable — Представляет возможность сортировки для группы элементов

Виджеты

• Accordion — виджет «Аккордеон»

• Autocomplete — Поле ввода с автодополнением

• Button — улучшенная кнопка, может также быть флажком (check box) или радио-кнопкой (radio button); все виды кнопки могут располагаться на панели инструментов (toolbar)

• Datepicker — виджет для выбора даты или диапазона дат

• Dialog — диалоговое окно, которое может иметь любое содержимое

• Progressbar — полоса прогресса

• Slider — слайдер

• Tabs — вкладки

Эффекты

• Color Animation — анимирует изменение цвета компонента

• Toggle Class, Add Class, Remove Class, Switch Class — анимируют изменение набора класса стилей компонента (см. CSS)

• Effect — множество эффектов связанных с появлением и исчезновением компонентов интерфейса

• Toggle — функция переключения между режимами видимости компонентов с использованием эффектов

• Hide — функция исчезновения компонента с использованием эффектов

• Show — функция появления компонента с использованием эффектов

Утилиты

• Position — установка положения элемента относительно позиции другого элемента (выравнивание)

_____________________________________________________________________________________

.effect(“bounce”)

$(document).ready(function(){

$('div.bounce').click(

function(){

$(this).effect("bounce", {times:3},300);

});

});

$(this).effect("bounce", {times:3},300); - где, баунс – прыжок, times – кол-во прыжков, 300-скорость.

_____________________________________________________________________________________

.animate()

Perform a custom animation of a set of CSS properties.

все эффекты анимации в jQuery крутятся вокруг функции animate – данная функция берет один или несколько CSS свойств элемента и изменяет их исходного до конечного за N-ое количество итераций (количество итераций зависит от указанного времени, но не реже одной итерации в 13ms (если я правильно накопал это значение)).

Функция animate понимает следующие параметры:

• params – описание CSS свойств элемента, до которых будет происходить анимация (т.е. есть у нас div с высотой 100px – говорим animate({height:200}) – и высота плавно изменяется до 200px)

• duration – скорость анимации – указываем в миллисекундах, или используя ключевые слова “fast” = 200ms, “normal” = 400ms или “slow” = 600ms

• easing – указываем какую функцию будем использовать для наращивания значений, на выбор “linear” или “swing” (хотите больше см. Easing Plugin)

• callback – функция, которая будет вызвана после окончания анимации

$(document).ready(function(){

$("#block").click(function(event){

$(this).animate({

width: "+=50px", // наращивание параметра записывается именно так

height: "+=50px",

fontSize: "+=2px"

},1500);

});

});

Вечно растущий при клике кубик

_____________________________________________________________________________________

.delay()