JQuery анимация игнорировать .stop

Question

У меня есть два отдельных сценария, которые управляют одним и тем же элементом. Проблема в том, что второй скрипт использует .stop, когда пользователь прокручивает. Первый скрипт заставляет элемент div прокручиваться вниз от верхней части страницы на 50 пикселей за 1 секунду. Если пользователь прокручивается до того, как наступает одна секунда, поле div не будет прокручиваться полностью вниз.

Есть ли способ предотвратить этот фрагмент кода, отвечающий на .stop, или, возможно, еще один способ написать его без использования анимации?

$(document).ready(function(){ 
    $('ul.undermenu').animate({'margin-top': '52px'}, 1000); 
}); 

Кусок кода с .stop, который вызывает первый не работает, когда пользователь прокручивает:

var previousScrollTop = 0; 
$(window).bind('scroll', function() { 
    var viewportWidth = $(window).width(), 
     scrollTop = $(window).scrollTop(); 
    if (scrollTop > 60) { 
     if(previousScrollTop <= 60) { 
      $("li.um").fadeOut(300); 
      $("ul.undermenu").stop(true, false).animate({width:'160px'}, { duration: 500, queue: true}); 
      $("ul.undermenu").animate({height:'60px'}, { duration: 200, queue: true}); 
      window.setTimeout(function() { 
      $('li.um').html('12345678901 pete@rufusmusic.co.uk'); 
      }, 400); 
      $("li.um").fadeIn(1000); 
      $("ul.undermenu").addClass("border"); 
     } 
    } else if (previousScrollTop > 60) { 
     $("li.um").fadeOut(300); 
     $("ul.undermenu").stop(true, false).animate({height:'22px'}, { duration: 200, queue: true}); 
     $("ul.undermenu").animate({width:viewportWidth}, { duration: 500, queue: true}); 
     window.setTimeout(function() { 
      $('li.um').html('Email: pete@rufusmusic.co.uk | Call: 12345678901 | Call: 01290923876'); 
      }, 400); 
     $("li.um").fadeIn(1000); 
     $("ul.undermenu").removeClass("border"); 
    } 
    previousScrollTop = scrollTop; 
}); 

Answer 1

Попробуйте

$(document).ready(function(){ 
    animationFnished = false; // initialise the state of the animation 
    $('ul.undermenu').animate({'margin-top': '52px'}, 1000, function(){ 
     animationFinished = true; // update the state after the animation is done 
    }); 
}); 

Затем во втором сценарии

var previousScrollTop = 0; 
$(window).bind('scroll', function() { 
    var viewportWidth = $(window).width(), 
     scrollTop = $(window).scrollTop(); 
    if (scrollTop > 60) { 
     if(previousScrollTop <= 60) { 
      $("li.um").fadeOut(300); 

      if(animationFinished) // we are done with the margin animation 
       $("ul.undermenu").stop(true, false).animate({width:'160px'}, { duration: 500, queue: true}); 
      else // animation is still going on or has not started yet 
       $("ul.undermenu").animate({width:'160px'}, { duration: 500, queue: true}); 

      $("ul.undermenu").animate({height:'60px'}, { duration: 200, queue: true}); 
      window.setTimeout(function() { 
      $('li.um').html('12345678901 pete@rufusmusic.co.uk'); 
      }, 400); 
      $("li.um").fadeIn(1000); 
      $("ul.undermenu").addClass("border"); 
     } 
    } else if (previousScrollTop > 60) { 
     $("li.um").fadeOut(300); 

     if(animationFinished) // we are done with the margin animation 
      $("ul.undermenu").stop(true, false).animate({height:'22px'}, { duration: 200, queue: true}); 
     else // animation is still going on or has not started yet 
      $("ul.undermenu").animate({height:'22px'}, { duration: 200, queue: true}); 

     $("ul.undermenu").animate({width:viewportWidth}, { duration: 500, queue: true}); 
     window.setTimeout(function() { 
      $('li.um').html('Email: pete@rufusmusic.co.uk | Call: 12345678901 | Call: 01290923876'); 
      }, 400); 
     $("li.um").fadeIn(1000); 
     $("ul.undermenu").removeClass("border"); 
    } 
    previousScrollTop = scrollTop; 
}); 

В этом случае мы инициализируем переменную, которая установлена ​​в true или false в зависимости от текущего состояния margin animation. Затем, когда пользователь прокручивает, эта переменная проверяется и, соответственно, запускается правильный оператор.