Когда только начинаешь использовать 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».
В другой раз, мы рассмотрим перемещение объекта относительно страницы.
Ответить | Цитировать
К примеру, я нажал кнопку, начал выезжать блок, он выехал на половину и я снова нажал кнопку чтоб блок уехал. Так вот, эти команды выстроятся в очередь и сначала блок полностью выедет, а только потом начнёт уезжать.
Я бы хотел другое поведение. Чтоб как только я нажал закрытие блока — он бы перестал выезжать и сразу же начала уезжать.
Я предполагаю, что этого можно добиться, если перед анимацией очистить очередь и тем самым остановить выезжание.
Как это сделать? 🙂
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
при разработке модуля
Ответить | Цитировать