JQuery animation running in step

Question

I want to run an animation in another animation's step. Somehow the second animation behaves like it would queued.

var checkTop = function(){
if( $(window).scrollTop() > 0 && $("#navigation").not(":animated") ){
    $("#navigation").animate({backgroundColor: "rgb(20,20,20,0.95)"}, {duration: 300, queue: false})
}
else{
    $("#navigation").animate({backgroundColor: "transparent"}, {duration: 300, queue: false})
    }
}

$(document).ready(function(){

var $window = $(window);    
$(".btn").click(function(){
    var btnname = $(this).attr('id');
    var section = btnname.replace('btn-','');

    $('html, body').stop().animate(
    { scrollTop: $('#' + section).offset().top - 30}, 
        {
            duration: 700, 
            queue: false, 
            step:function(now, fx){
                checkTop();
            }
        }
    );
    });     
});

Any help will be greatly appreciated.

score 0 · Accepted Answer · answered Feb 28 '15 at 06:16

It turns out there was a problem in the if statement while checking if the navigation bar is already being animated (it was show as not being animated ALWAYS). Also a funny thing, when I replaced the && with a ||, the scrolling down animation worked fine. To counter the checking problem, I added a variable that would set 0 if the navbar wasn't animated to be visible and set to 1 if it was.

var trigger = 0;

var checkTop = function(){
if( $(window).scrollTop() > 0 ){
    if(trigger == 0){
        $("#navigation").animate({backgroundColor: "rgb(20,20,20,0.95)"}, {duration: 700, queue: false})
        trigger = 1;
    }
}
else{
    $("#navigation").animate({backgroundColor: "transparent"}, {duration: 700, queue: false})
    trigger = 0;
}
}

JQuery animation running in step

1 Answers1