Как вызвать анимацию только после завершения предыдущей?

Question

[Талян]

Здравствуйте.

Делал я всплывающее меню, которое должно появляться при скролле, и исчезать по возвращению страницы наверх.

Моя реализация выглядит так:
https://codepen.io/antipetya/pen/MLPXEv

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

Я добавил условие ожидания завершения анимации, которое хранится в переменной animation_complete:

var complete_animation=1;
if (window.pageYOffset > 80)
        {
            if (complete_animation == 1)
            {              
                complete_animation = 0;
                console.log(complete_animation);
                $("#navigation_slider").animate({
                    left: "0"
                }, 100, function () {
                    complete_animation = 1;
                });
            }
        } else
        {
            if (complete_animation == 1)
            {
              console.log(complete_animation);
                complete_animation = 0;
                $("#navigation_slider").animate({
                    left: "-80"
                }, 100, function () {
                    complete_animation = 1;                  
                });
            }
        }

Но всё равно такое ощущение, что завершение анимации вообще не отслеживается.
При дёргании скролла вверх-вниз происходит то же самое.

Решил посмотреть в консоли - что же происходит со значением complete_animation - так оно чуть ли не рандомно как-будто меняется.

Копал бы дальше - да знать бы куда копать :)

Answer 1

[Владимир Проскурин]

Чтобы новая анимация не ждала завершения предыдущей, а прерывала ее, перед вызовом animate, следует вызывать метод stop
$("#navigation_slider").stop().animate(...)
Вот так норм https://codepen.io/anon/pen/WPaKVa

Comments

[Талян]

Благодарю