• Инструменты для разработчика

    • Самые удобные инструменты для разработчика, которые облегчат жизнь любого как начинающего так и продвинутого разработчика. Украшатели, уменьшители, конвертеры кодов. Доменные инструменты. Всё в одном комплекте.
  • Использование BB кодов. Тут указаны существующие BB коды на форуме.

jQuery №3 Урок l Анимация jQuery l Icoder.uz

  • Автор темы Jackwar
  • Дата создания
  • Ответов 0
  • Просмотров 890

Jackwar

Заблокирован
Регистрация
22.01.2016
Сообщения
36
Репутация
5
Баллы
0
Награды
0
Лучшие ответы
0
jQuery метод animate() позволяет Вам создавать пользовательские анимации.

Анимации jQuery - Метод animate()

jQuery метод animate() используется, чтобы создавать пользовательские анимации.

Синтаксис:

$(селектор).animate({params}скорость,обратный_вызов);
Необходимый параметр params определяет свойства CSS, которые будут анимированы.

Дополнительный параметр скорости определяет продолжительность эффекта. Это может принять следующие значения: "slow", "fast" или миллисекунды.

Дополнительный параметр обратного вызова - функция, которая будет выполняться после того, как анимация завершается.

Следующий пример демонстрирует простое использование метода animate(); он перемещает <div> элемент налево, пока он не достигает свойства left, равного 250px:


пример:
$("button").click(function(){
$("div").animate({left:'250px'});
});



По умолчанию все элементы HTML имеют статическую позицию, и не могут быть перемещены.

Чтобы управлять позицией, не забудьте сначала установить CSS свойство position элемента в relative, fixed или absolute!

Анимация jQuery - Управление Несколькими Свойствами

Заметьте, что многократные свойства могут быть анимированы одновременно:




пример:

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});


Действительно ли возможно управлять ВСЕМИ свойствами CSS с помощью метода animate()?
Да, почти! Однако, есть одна важная вещь, которую следует помнить: все имена свойств должны быть указаны в стиле регистра верблюда при использовании с методом animate(): Вы должны будете писать paddingLeft вместо padding-left, marginRight вместо margin-right и так далее.
Кроме того, цветная анимация не включается в ядро библиотеки jQuery.
Если Вы хотите анимировать цвет, Вы должны загрузить Плагин Цветной Анимации с jQuery.com.

Анимация jQuery() - Использование Относительных значений

Также можно определять относительные значения (значения относительно текущего значения элемента). Это делается, помещая += или -= перед значением:

пример:
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});


Анимация jQuery() - Использование Предопределенных Значений

Можно даже определить значение свойства анимации как "show", "hide" или "toggle":

пример:
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

Анимация jQuery - Использование Функциональности Очереди

По умолчанию jQuery идет с функциональностью очереди для анимаций.

Это означает, что, если Вы пишете многократные вызовы animate() друг после друга, jQuery создает "внутреннюю" очередь с этими вызовами метода. Затем она выполняет анимационные вызовы ОДИН ЗА ДРУГИМ.

Так, если Вы хотите выполнить различные анимации друг за другом, можно использовать в своих интересах функциональность очереди:

пример:

$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});


Пример ниже сначала двигает элемент <div> направо, и затем увеличивает размер шрифта текста:


$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
 
Сверху Снизу