0

I am using jquery to add css to a div, it works well when I add just one css property

here is the code;

jQuery(window).on('scroll', function() {
    if(jQuery(window).scrollTop() > 60) {
        jQuery('#myheader2').css('background-color', '#fff');
    } else {
       jQuery('#myheader2').css('background-color', '#fff');
    }
});

However if add more than one css property, it stops working;

here is the code;

jQuery(window).on('scroll', function() {
    if(jQuery(window).scrollTop() > 60) {
        jQuery('#myheader2').css({'background-color': '#fff','transition': 'background-color 3s';});
    } else {
       jQuery('#myheader2').css('background-color', '#0b0b22');
    }
});

I looking to add transition to slow the speeed of background color change.

Here2Learn
  • 43
  • 1
  • 7
  • add a class and have css for that class be the required styling? – depperm Apr 01 '22 at 13:27
  • @depperm [easy and correct way? No!](https://imgflip.com/s/meme/Drake-Hotline-Bling.jpg) – EzioMercer Apr 01 '22 at 13:30
  • I believe that `transition` needs to be a permanent CSS property of `#myheader2` so that it knows the `from` and `to` states to transition between. – Donnie Apr 01 '22 at 13:30
  • Does this answer your question? [CSS Transition Not Firing](https://stackoverflow.com/questions/7069167/css-transition-not-firing) – oguzhancerit Apr 01 '22 at 13:47

0 Answers0