CODEWITHSUNDEEP
jqueryjquery-color
Kashyap Pavra
Kashyap Pavra

Reputation: 1

jquery animate color working only once on scolling

    $(window).scroll(function() 
{
    if (window.matchMedia('(min-width: 900px)').matches)
    {
        if ($(this).scrollTop()>0)
        {
            $('#upper_bar_desktop').animate({"background-color": "#ffffff" , "color": "#000000"}, 1200 );
        }

        else{
            $("#upper_bar_desktop").animate({"background-color": "initial" , "color": "#ffffff"}, 1200 );
        }
     }
 });

I have written this code to change the background color and font color of my upper bar on scrolling down, it does work perfectly on scrolling once but when I go back up again it does not perform the animation.

thank for the hekp

Upvotes: 0

Views: 32

Answers (1)

Miro
Miro

Reputation: 8650

Change initial to whatever the color was. #000000 for example.

jQuery can't animate to initial.

Also I'd recommend using classes. 

    if ($(this).scrollTop()>0)
    {
        $('#upper_bar_desktop').addClass('fixed'); 
    }

    else{
        $('#upper_bar_desktop').removeClass('fixed'); 
    }

Then you animate using CSS transition only.

#upper_bar_desktop{
  transition:1s;
}

#upper_bar_desktop.fixed{
  background:#fffff;
  color:red;
}

Upvotes: 1

Related Questions