Delay in start of jQuery animate

Question

Please look at this fiddle -> 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);
    }
});

Basically it moves the frontpage out of sight on scrolldown, and brings it back in on scrollup. It has been working fine, except it is weirdly slow at the beginning of the animations. Any suggestions? Thank you!

score 1 · Accepted Answer · edited May 23 '17 at 10:27

I think what you are seeing is the default animation type swing, it starts off slowly. You could change it to linear which is the other option. I also made some changes to the script, .on is preferred these days and mousewheel without using the plugin won't work on all browser. The wheel event will but only with modern ones, in case of deep browser support I'd recommend the 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');
    }
});

If you'd like to use the mousewheel.js plugin instead of wheel it's usage is a bit different. You could have a look at this to see both of them in action :

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

And this is an interesting page to check all the curves and speed related to the easing types :

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

Back at you for rounding up the question. Special easing is pretty neat too, you'll be able to use all the effects from the link at the bottom instead of only the two basic ones. My two favourite plugins. https://plugins.jquery.com/jquery.easing/ — Shikkediel, Oct 26 '15 at 15:06

score 0 · Answer 2 · answered Oct 25 '15 at 05:35

Try using .stop(true, true) at .frontpage mousewheel event , .stop(false, true) at .container mousewheel event

$(".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/

Delay in start of jQuery animate

2 Answers2