На этом шаге мы рассмотрим использование расширенного метода .animate().
Модуль эффектов библиотеки jQuery UI поставляется в виде базового файла и множества отдельных файлов эффектов. Базовый файл включает реализацию анимационных эффектов изменения цвета и классов CSS, а также улучшенную реализацию переходов.
Эффекты управления цветом
При наличии в документе ссылки на базовый файл эффектов мы получаем в свое распоряжение расширенный метод .animate(), способный принимать дополнительные свойства стиля, такие как borderTopColor, backgroundColor и color. Например, он позволяет постепенно изменить черный цвет текста на белом фоне до белого цвета текста на черном фоне:
$(document).ready(function() {
$('#mydiv').animate({
color: '#fff',
backgroundColor: '#000'
}, 'slow');
});
Рис.1. Эффект одновременного изменения цвета текста и фона (щелкните по кнопке)
Полный текст этого примера можно взять здесь.Элемент выглядит именно так, как и ожидалось; текст постепенно становится белым, а фон - черным.
На следующем шаге мы продолжим изучение этого вопроса.
