С помощью jQuery вы можете легко добавить эффекты на страницу. Эффекты могут использовать стандартные настройки, а также можно задать необходимую длительность. Вы также можете задать анимирование любых свойств CSS.
Более подробно об эффектах jQuery читайте http://api.jquery.com/category/effects/.
Наиболее используемые эффекты встроены в jQuery как методы:
$.fn.show
Показать выбранный элемент.
$.fn.hide
Скрыть выбранный элемент.
$.fn.fadeIn
Анимировать прозрачность выбранных элементов до 100 %
$.fn.fadeOut
Анимировать прозрачность выбранных элементов до 0%
$.fn.slideDown
Показать выбранные элементы с помощью вертикального скользящего движения.
$.fn.slideUp
Скрыть выбранные элементы с помощью вертикального скользящего движения.
$.fn.slideToggle
Показать или скрыть выбранные элементы с помощью вертикального скользящего движения, в зависимости от того видны или нет эти элементы.
// пример использования встроенного эффекта $('h1').show();
Изменение длительности встроенных эффектов
Кроме $.fn.show и $.fn.hide, длительность всех анимированных встроенных методов – 400 мс по умолчанию. Изменить длительность эффекта очень просто.
// пример установки длительности эффекта $('h1').fadeIn(300); // показать в течение 300мс $('h1').fadeOut('slow'); // используя встроенное определение скорости
jQuery.fx.speeds
В jQuery есть объект jQuery.fx.speeds, который содержит дефолтное значение скорости, а также значения скорости для “slow” и “fast”.
speeds: { slow: 600, fast: 200, // скорость по умолчанию _default: 400 }
Также вы можете изменить или добавить что-то свое в этот объект. Например, вы можете изменить дефолтную длительность эффектов, или создать свои собственные скорости.
// пример добавления скорости в jQuery.fx.speeds jQuery.fx.speeds.blazing = 100; jQuery.fx.speeds.turtle = 2000;
Выполнение задач по завершению эффекта
Очень часто требуется выполнить какой-либо код, как только анимация была завершена – если вы начнете исполнять код во время анимации, то это может сказаться на ее качестве, или могут быть удалены какие-либо элементы необходимые для анимации. [Определение: Callback функция позволяет зарегистрировать необходимое нам событие, которое произойдет в будущем.] В нашем случае, событие, которое мы будем обрабатывать, произойдет по завершению анимации. Внутри callback функции, ключевое слово this относится к элементу, для которого был вызван эффект; поскольку мы внутри обработчика события, мы можем преобразовать его к объекту jQuery $(this).
// пример исполнения кода по завершению анимации $('div.old').fadeOut(300, function() { $(this).remove(); });
Заметим, что если в выборке не будет ни одного элемента, то callback функция не будет вызвана! Вы можете решить эту проблему, проверив содержатся ли элементы в вашей выборке; если нет – вы можете сразу же выполнить callback функцию.
// пример вызова callback функции, даже когда нет элементов для анимации var $thing = $('#nonexistent'); var cb = function() { console.log('done!'); }; if ($thing.length) { $thing.fadeIn(300, cb); } else { cb(); }