To achieve a color animation effect, you will first need to include jQuery UI or the jQuery Color plugin as mentioned in another response.

For a simple fade-in effect as you scroll down the page, you can try the following code snippet:

$(function(){
    $(window).scroll(function(){
        var $scrollPercent = ($(document).scrollTop() / 100);

        if($scrollPercent <= 1){
            $('header').css({backgroundColor:'rgba(0,0,0,'+$scrollPercent+')'});
        }
    });
});

This script gradually increases the background color opacity based on your scrolling position. For example, scrolling 50 pixels down would set the background color opacity to 50%. You can easily customize the height threshold for full opacity by adjusting the calculations.

UPDATE: If you prefer a simpler approach that just fades in the color after scrolling past 100 pixels, here's an alternative solution:

Instead of using CSS transitions, you can add an additional HTML element inside your header section:

<div class="header">
    <div class="headerBackground"></div>
    <!-- other header content -->
</div>

Define the CSS styles for this new element:

.header {
    position:relative;
}

.headerBackground {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgb(0,0,0);
    opacity:0;
    filter:alpha(opacity=0); // for IE8 and below
}

Then use the following jQuery script to animate the color change:

$(function(){
    $(window).scroll(function(){
        var $bg = $('.headerBackground');

        if($(document).scrollTop() >= 100){
            $bg.animate({opacity:1},500); // adjust speed as needed
        } else {
            $bg.animate({opacity:0},500);
        }
    });
});

This method achieves the desired effect without relying on external libraries like jQuery UI. However, keep in mind that it involves adding non-semantic HTML elements for styling purposes. It's just another option to consider.

I find it helpful to organize my CSS by creating two separate classes to handle different scenarios like this. One class is used when the window is scrolled, and the other is used when it's not:

    header { background: transparent; }
    header.scroll-down { background: #f2f2f2; }

Here's an example of how the JavaScript could be implemented:

    $(function () {
      $(window).scroll(function () {
        if($(document).scrollTop()>100){
          $('header').addClass('scroll-down');
        }
        else {
          $('header').removeClass('scroll-down');
        }
      });
    })

Although your code is accurate, please note that jQuery does not have built-in support for color animation. You will need to use a plugin like jquery-ui to achieve this effect: http://jqueryui.com/animate/

UPDATE: In fact, there is a mistake in your code. Instead of setting background: 1, you should set the backgroundColor property to a specified color:

Therefore, use .css({'backgroundColor': 'red'}) followed by .css({'backgroundColor': 'blue'})

To create animated background colors without worrying about older browser support, you can use a combination of jQuery and CSS3 transitions:

Start with the following HTML code:

<div id="myContainer">Content goes here</div>

Next, add the JavaScript code:

var myContainer = $('#myContainer');

myContainer.on('click', function (el) {

    myContainer.css('background-color', 'blue');

}

With this setup, clicking on the element #myContainer will immediately change its background color to blue.

If you include the following CSS code as well:

#myContainer {
    -webkit-transition: background-color 500ms ease-in-out;
    -moz-transition: background-color 500ms ease-in-out;
    transition: background-color 500ms ease-in-out;
}

This will ensure that any changes in background color are smoothly faded over a 500ms duration. This method works perfectly on all modern browsers except for IE versions 9 and below.

Here is the approach I took to solve this:

I implemented a section that smoothly transitions in and out based on the user's scroll position.

CSS

.backTex {
    width:100%;
    height:500px;
    margin-top:50px;
    background-color: @myGreen;
    //Height
    transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -ms-transition: height 0.5s ease;
    //Background-Color
    transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    -ms-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
} 

jQuery

$(document).scroll(function() {
        var positionScroll = $(this).scrollTop();

        if(positionScroll <= 499) {
            $(".backTex").css("background-color", "#fff");    
        } else if (positionScroll > 500 && positionScroll < 1100) {
            $(".backTex").css("background-color", "#2ecc71");
        } else {
            $(".backTex").css("background-color", "#fff");
        }
    });

So far, there have been no compatibility issues across different browsers. Feel free to let me know if you encounter any problems. Thanks!