Question

Here is my code
http://jsfiddle.net/mihaene/7bdkB/

I want a div to slide in, as soon as I scroll down a certain amount of pixel.
It works, but very, very delayed (like 5seconds).
What’s the problem?

Any suggestion would be very much appreciated.

Answer 1

Hi I think the problem is your else block. jQuery is then starting the animation which takes ~300 ms.

var $test2 = $(".test2");
$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $test2.stop().animate({left: "200px"}, 300);
    } else {
        $test2.stop().animate({left: "-90px"}, 300);
    }
});

So just use the stop() method of jQuery to stop those animations.

On a sidenote: maybe you should think of different if / else statements in order not to get an animation (or stop / restart) with every scrolling event as other suggested.