Задержка в начале JQuery анимации

Question

Пожалуйста, посмотрите на этой скрипке ->http://jsfiddle.net/LwL9Ls4o/1/

JS:

$(".frontpage").bind('mousewheel', function (e) { 
    if (e.originalEvent.wheelDelta/120 < 0) { 
     $(".frontpage").stop().animate({ 
      top: "-100%" 
     }, 700); 
    } 
}); 

$(".container").bind('mousewheel', function (e) { 
    if (e.originalEvent.wheelDelta/120 > 0 && $(".container").scrollTop() < 10) { 
     $(".frontpage").stop().animate({ 
      top: "0" 
     }, 700); 
    } 
}); 

В основном это перемещает FrontPage из вида на Прокрутите вниз, и возвращает его обратно в на Scrollup. Он отлично работает, за исключением того, что в начале анимации он очень медленный. Какие-либо предложения? Спасибо!

Answer 1

Я думаю, что вы видите, это тип swing анимации по умолчанию, он начинает медленно. Вы можете изменить его на linear, который является другим вариантом. Я также внесли некоторые изменения в скрипт, .on является предпочтительным в эти дни, и mousewheel без использования плагина не будет работать на всех браузерах. Событие wheel будет, но только с современными, в случае глубокой поддержки браузера я бы рекомендовал plugin.

Fiddle

$('.frontpage').on('wheel', function(e) { 

    if (e.originalEvent.deltaY > 0) { 
     $(this).stop().animate({ 
      top: '-100%' 
     }, 700, 'linear'); 
    } 
}); 

$('.container').on('wheel', function(e) { 

    if (e.originalEvent.deltaY < 0 && $(this).scrollTop() < 10) { 
     $('.frontpage').stop().animate({ 
      top: 0 
     }, 700, 'linear'); 
    } 
}); 

Если вы хотите использовать mousewheel.js плагин вместо wheel это использование немного отличается. Вы могли бы посмотреть на это, чтобы увидеть их обоих в действии:

https://stackoverflow.com/a/33334461/3168107

И это интересная страница, чтобы проверить все кривые и скорость, связанные с ослаблением типов:

http://jqueryui.com/resources/demos/effect/easing.html

Answer 2

Попробуйте использовать .stop(true, true) в .frontpagemousewheel случае, .stop(false, true) на .containermousewheel события

$(".frontpage").bind('mousewheel', function (e) { 
    if (e.originalEvent.wheelDelta/120 < 0) { 
     $(".frontpage").stop(true, true).animate({ 
      top: "-100%" 
     }, 700); 
    } 
}); 

$(".container").bind('mousewheel', function (e) { 
    if (e.originalEvent.wheelDelta/120 > 0 && $(".container").scrollTop() < 10) { 
     $(".frontpage").stop(false, true).animate({ 
      top: "0" 
     }, 700); 
    } 
}); 

jsfiddle http://jsfiddle.net/LwL9Ls4o/4/