Как правильно делать анимацию в несколько этапов?
Допустим я хочу что бы блок вначале поехал влево, потом вправо, потом вниз.
Как лучше всего это реализовать?
Правильно ли делать очередность анимаций вкладывая их в колбэки анимации?
$('.block').animate({'left':'100px'},400,function(){
$('.block').animate({'top':'200px'},400,function(){
и так далее...
});
});
Или все же лучше через переменную и интервал, и при завершении что бы очищала интервал и запускала другую функцию с интервалом?
И еще вопрос... Допустим я хочу что бы эта функция сработала только тогда когда пользователь прокрутил скролл ниже на 1000px.
Просто если написать if (scrollTop >= 1000){}, тогда оно будет ее все время повторять при прокрутке скрола дальше, а мне нужно что бы как только 1000 и больше, играет анимация 1 раз в не зависимости крутит скролл дальше пользователь или нет.
Пробовал так.
var animStart = 0;
$(window).on('scroll',function(){
if(scrollTop >= 1000){
animStart = 1;
}
if(animStart == 1){
анимация..
}
});
Правильно ли это? или как лучше? (вроде бы в хроме норм отработала анимация, а в ИЕ непонятно что получилось))
Помогите пожалуйста.