jQuery встроенные эффекты

С помощью 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();
}

 

источник

Читайте также: