Дополнение

Эффекты

Среди эффектов предоставляемых jQuery UI я выделяю четыре пункта:

• Анимация цвета
• Анимация изменения классов
• Набор эффектов
• Расширения возможностей easing

За анимацию цвета отвечает компонент "Effects Core", который позволяет анимировать изменения цвета посредством использования функции "animate()":

$("#my").animate({ backgroundColor: "black" }, 1000);

Да-да, jQuery из коробки не умеет этого делать, а вот jQuery UI позволяет анимировать следующие параметры:

• backgroundColor
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• color
• outlineColor

Ещё одной возможностью заключенной в "Effects Core" является анимация изменений класса DOM элемента, т.е. когда вы будете присваивать новый класс элементу, то вместо обычного моментального применения новых CSS свойств вы будете наблюдать анимацию этих свойств от текущих до заданных в присваиваемом классе. Для использования данного функционала нам потребуются старые знакомые – методы "addClass()", "toggleClass()" и "removeClass()", с одной лишь разницей – при вызове метода вторым параметром должна быть указана скорость анимации:

$("#my").addClass("active", 1000);
$("#my").toggleClass("active", 1000);
$("#my").removeClass("active", 1000);

Если из предыдущего абзаца у вас не возникло понимания сути происходящего, то этот код для вас:

<style>
#my {
font-size:14px;
}
#my.active {
font-size:20px;
}
</style>
<script>
$(function (){
$("#my").addClass("active", 1000);
// тут получается аналогично следующему вызову
$("#my").animate({"font-size":"20px"}, 1000);
});
</script>

А ещё появляется метод switchClass(removeClass, addClass, duration), который заменяет один класс другим, но мне он ни разу не пригодился.

О наборе эффектов я не буду долго рассказывать, их лучше посмотреть в действии на странице http://jqueryui.com/effect/. Для работы с эффектами появляется метод "effect()", но сам по себе его лучше не использовать, ведь UI расширил функционал встроенных методов "show()", "hide()" и "toggle()", теперь, передав в качестве параметра скорости анимации названия эффекта вы получите необходимый результат:

$("#my").hide("puff");
$("#my").show("transfer");
$("#my").toggle("explode");

Приведу список эффектов, может кто запомнит: blind, bounce, clip, drop, explode, fold, highlight, puff, pulsate, scale, shake, size, slide, transfer.

Помните, я в главе о анимации рассказывал о easing и одноименном плагине для jQuery? Так вот UI тоже расширяет easing, так что подключив его можно отключать плагин. И да, этот функционал завязан лишь на "Effects Core".