Анимация на jQuery

Анимация на jQueryКогда только начинаешь использовать jQuery, любой скажет, что jQuery замечателен своими эффектами. Такие как slideDown() и fadeIn() делают жизнь лучше. Если разбираться глубже с jQuery, то наверняка вы узнаете о animate(). Этот метод прост в использовании и одновременно очень крут.

Если посмотреть на исходники jQuery, можно увидеть, что все методы — частные случаи использования функции animate().

slideDown: function(speed, callback){
return this.animate({height: "show"}, speed, callback);
},
fadeIn: function(speed, callback){
return this.animate({opacity: "show"}, speed, callback);
}

Метод animate() использует любой css-стиль с числовым значением и плавно изменяет его.

Например изменим ширину у блока:


$(".block").animate({width: "200px"}, 400);

Выполнение анимации с очередью.

Еще анимация выстраивается в очередь, поэтому чтобы вызвать анимацию после предыдущего значения, просто вызовите анимацию еще раз. Смысла в назначении callback-ов нет:


$(".block").animate({width: "200px"}, 400);
$(".block").animate({width: "500px"}, 400);

Вот как бы это выглядело с использованием callback-ов:


$(".ads").animate({width: "200px"}, 400, function(){
$(".ads").animate({width: "500px"}, 400);
});

Запуск анимации двух параметров одновременно.

Если же вам нужно наоборот, запустить анимацию двух параметров одновременно, тогда просто укажите оба стиля в параметрах объекта и сделайте один вызов:


$(".block").animate({width: "200px", height: "150px"}, 700);

Так же я забыл про тип анимации (easing).

У easing есть два параметра: «swing» и «linear«.

$(".ads").animate({width: "200px"}, 700, "linear");
$(".ads").animate({height: "150px"}, 700, "swing");

Linear двигает все линейно, одинаково. А параметр swing вначале ускоряет, а потом доводит до нормально скорости.

Ну вот, пора подвести итог. Сегодня мы научились использовать анимацию с использованием callback’ов, с использованием очереди и анимировать два параметра одновременно. Плюс, мы узнали два типа анимации: «linear» и «swing».

В другой раз, мы рассмотрим перемещение объекта относительно страницы.

Комментарии — 5 комментариев

  1. #5157 Ney в 12:04, 7 сентября 2009:

    Ответить | Цитировать

    Не подскажете, как очистить очередь анимации jQuery?

    К примеру, я нажал кнопку, начал выезжать блок, он выехал на половину и я снова нажал кнопку чтоб блок уехал. Так вот, эти команды выстроятся в очередь и сначала блок полностью выедет, а только потом начнёт уезжать.

    Я бы хотел другое поведение. Чтоб как только я нажал закрытие блока — он бы перестал выезжать и сразу же начала уезжать.

    Я предполагаю, что этого можно добиться, если перед анимацией очистить очередь и тем самым остановить выезжание.

    Как это сделать? 🙂

  2. #5165 Ney в 14:53, 7 сентября 2009:

    Ответить | Цитировать

    P.S. Нашёл ответ на свой вопрос. Нужно использовать метод stop() — http://docs.jquery.com/Effects/stop

  3. #5202 WebMast в 7:03, 8 сентября 2009:

    Ответить | Цитировать

    Это хорошо.. Я напишу подробнее о методе stop(), но сначала нужно разобраться с самой анимацией.

  4. помогло хорошо
    при разработке модуля

  5. […] Анимация на jQuery — использование простой анимации, задание очереди анимации, запуск анимации двух параметров одновременно, тип анимации. […]

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting