Good day. I have a script

$(document).ready(function() { $(window).scroll(function() { var top = $(document).scrollTop(); if (top > 0) { $(".header").animate({ backgroundColor: '#ffffff' }, 1000); } else { $(".header").animate({ backgroundColor: 'none' }, 1000); } }); });

line - backgroundColor: 'none' does not work. What is the solution?

  • Maybe some of these initial , inherit , unset instead of none - stackanon
  • Unfortunately, none canceled the previous background value. - Pavel Zhukovsky

5 answers 5

  $(document).ready(function() { // Сохраним значение фона // each нужен, т.к. у элементов может быть разный фон $(".header").each(function(){ var bg = $(this).css('background-color'); $(this).data('bg', bg); }); $(window).scroll(function() { var top = $(document).scrollTop(); if (top > 0) { $(".header").animate({ backgroundColor: '#ffffff' }, 1000); } else { $(".header").each(function(){ // Используем значение фона $(this).animate({ backgroundColor: $(this).data('bg'); }, 1000); }); } }); });

    The value of backgoundColor needs to be described in .css (). Example:

     .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" })

    Option:

     $(document).ready(function() { $(window).scroll(function() { var top = $(document).scrollTop(); if (top > 0) { $(".header").css("backgroundColor", "#ffffff"); } else { $(".header").css("backgroundColor", "none"); } }); });

    A more detailed description is presented here .

    Adding to the answer: background-color cannot be changed via animate() until the jQuery.Color plugin is connected

    You can also connect the library and try to play this way:

    Option 2:

     <!-- include Google's AJAX API loader --> <script src="http://www.google.com/jsapi"></script> <!-- load JQuery and UI from Google (need to use UI to animate colors) --> <script type="text/javascript"> google.load("jqueryui", "1.5.2"); </script> <script type="text/javascript"> $(document).ready(function() { $(window).scroll(function() { var top = $(document).scrollTop(); if (top > 0) { $(".header").stop().animate({backgroundColor: '#ffffff'}, 1000); } else { $(".header").stop().animate({backgroundColor: 'none'}, 1000); } }); }); </script>
    • Your option does not work. I tried to write $ (". Header"). Css ({backgroundColor: '#ffffff'}) $ (". Header"). Css ({backgroundColor: 'none'}) - Pavel Zhukovsky
    • @PavelZhukovsky corrected the answer, added the second option - Legionary
    • This option works. But no animation. It is important that the background appear with animation elements. - Pavel Zhukovsky
    • @PaulZhukovsky minute, now I will correct :) - Legionary
    • @PavelZhukovsky Added information to the answer, for use in animate () background-color - you need to install the plugin, this is if you want via animate () - Legionary

    Solved the problem in this way

      $(document).ready(function() { $(window).scroll(function() { var top = $(document).scrollTop(); if (top > 0) { $(".header").addClass('fly', 500); } else { $(".header").removeClass('fly', 500); } }); }); 
     .fly { background-color: white; }

    • And you wanted the animation, add to .fly - transition: background-color .5s - Artem Gorlachev
     backgroundColor: 'none'

    replaced by

     backgroundColor: 'auto'
    • I tried this option - it does not work. - Pavel Zhukovsky

    The "background-color" property in css has three possible values: color code, inherit and transparent. Your, apparently, the last:

     backgroundColor: 'transparent'