Latest web development tutorials

JQuery эффекты - Анимация

Метод JQuery одушевленные () позволяет создавать пользовательские анимации.



Jquery

JQuery анимации - одушевленное () метод

Метод JQuery одушевленные () используется для создания пользовательских анимации.

Синтаксис:

$(selector).animate({params},speed,callback);

Обязательные Params параметр определяет формирование свойств CSS анимации.

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

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

Следующий пример демонстрирует способ простое приложение одушевленные (). Это <DIV> элемент вправо, чтобы переместить 250 пикселей:

примеров

$("button").click(function(){
$("div").animate({left:'250px'});
});

Попробуйте »

лампа По умолчанию все HTML элементы имеют статическое положение и не может двигаться.
Для рабочее положение, помните первый элемент CSS атрибут позиции установлен относительный, фиксированный или абсолютный!

JQuery одушевленные () - работает несколько свойств

Обратите внимание, что процесс создания анимации может использовать несколько свойств:

примеров

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

Попробуйте »

лампаВы можете анимировать () метод , чтобы управлять всеми атрибутами CSS?

Да, почти! Тем не менее, важно помнить: При использовании одушевленные (), записать все имена атрибутов должны использовать обозначения Camel, например, должен быть использован вместо paddingLeft обивка налево, вместо того чтобы использовать marginRight Правое поле и т.д. ,

В то же время, цвет анимации не входит в основной JQuery библиотеки.

Если вам нужно создать анимацию цвета, вам нужно jquery.com скачать Color Animations плагин.


JQuery одушевленные () - использование относительного значения

Кроме того, можно определить относительную величину (значение по отношению к текущему значению элемента). Нужно предшествовать значение с + = или - =:

примеров

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

Попробуйте »

() JQuery одушевленным - использовать заданное значение

Вы даже можете поместить значение свойства анимации "шоу", "скрыть" или "тумблер":

примеров

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

Попробуйте »

JQuery одушевленные () - С помощью функции Queue

По умолчанию, JQuery предоставляет возможности организации очередей для анимации.

Это означает, что если вы пишете больше, чем один за другим вызовом одушевленные (), JQuery создает вызов метода эти "внутренние" очереди. Потом один за другим, чтобы запустить эти анимации вызовов.

Пример 1

$("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> перемещается к правым 100 пикселей, а затем увеличить размер текста:

Пример 2

$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

Попробуйте »