CODEWITHSUNDEEP
javascriptjqueryfunctionscrolljquery-animate
Peter Stuart
Peter Stuart

Reputation: 2434

Slow/unresponsive animation with jQuery animation

I am writing a small jQuery function and I seem to be having trouble.

What I am trying to do here is when the user scrolls down the page by 90px, a div tag should animate down (from top:-50px to top:0), and vice-versa when they scroll back to the top of the page.

The problem I am having is that the animation seems to be very slow and unresponsive at times. I test in 3 different browsers and different computers but I am having no joy.

Here is my code:

    // Show div
    var scrollValue = "90";

    // Animate functions
    var showHead = function (){
$(".element").animate({top: "0"}, 250);
}
var hideHead = function (){
$(".element").animate({top: "-50px"}, 250);
}

    $(window).scroll(function() {
        if ($(this).scrollTop() > scrollValue) {
            showHead();
        } else {
            hideHead();
        }
    });

The .element properties:

.element { positoin:fixed; top:-50px; }

Could anyone figure out why my code the hide/showHead functions are so sloppy?

Thanks,

Peter

Upvotes: 1

Views: 475

Answers (5)

vergilius
vergilius

Reputation: 390

try using queue: false and as Alexander said use .stop()

here jsfiddle

http://jsfiddle.net/hwbPz/

Upvotes: 1

Alexander
Alexander

Reputation: 23537

The scroll event is triggered several times and even though it is rate-limited it keeps being a rather intensive operation. Actually, you may be queuing several animations and the fx stack may be growing very quickly.

One possibility you can try is stopping all previous animations before triggering a new one. You can do this by using .stop().

$(".element").stop().animate({top: "0"}, 250);

The .stop() function also provides some other options which you can use to tweak it even more.

Upvotes: 1

Brad Christie
Brad Christie

Reputation: 101604

Assuming you have position:fixed (or some other sort of styling making the bar visible when necessary):

var scrollheight = 90;

var $el = $('.element');
function showHead(){
    $el.stop().animate({
        top: '0px'
    }, 250);
}
function hideHead(){
    $el.stop().animate({
        top: '-50px'
    }, 250);
}

$(window).scroll(function(){
    if ($(window).scrollTop() > scrollheight){
        showHead();
    }else{
        hideHead();
    }
});

example: http://jsfiddle.net/L4LfL/

Upvotes: 1

sdespont
sdespont

Reputation: 14025

scroll events occurred many time durring user scrolling.

You need to check if your animation is in progress before starting the animation again.

Try this :

// Show div
var scrollValue = "90";
var inProgress = false;

// Animate functions
var showHead = function () {
    if(inProgress)
        return false;

    //Animate only if the animation is not in progress
    inProgress = true;

    $(".element").animate({
        top: "0"
    },250,function(){
        inProgress = false; //Reset when animation is done
    });
}
var hideHead = function () {
    if(inProgress)
        return false;

    //Animate only if the animation is not in progress
    inProgress = true;

    $(".element").animate({
        top: "-50px"
    }, 250,function(){
        inProgress = false; //Reset when animation is done
    });
}

$(window).scroll(function () {
    if ($(this).scrollTop() > scrollValue) {
        showHead();
    } else {
        hideHead();
    }
});

Upvotes: 1

soyuka
soyuka

Reputation: 9105

Try this one :

$(window).scroll(function() {
    if (window.scrollY > scrollValue) {
        showHead();
    } else {
        hideHead();
    }
});

Upvotes: 1

Related Questions