jQuery CSS animation for background image
<p>I have this javascript code :</p>

<pre><code>$(".linksColl a li").hover(function () {
                 $(this).css({
                    "background-image" : "url(images/links/linkHover1.png)",
                    "background-position" : "center center",
                    "background-repeat" : "no-repeat"});              
        });

        $(".linksColl a li").mouseout(function () {
                $(this).css({
                    "background-image" : "",
                    "background-position" : "",
                    "background-repeat" : ""});                      
        });
</code></pre>

<p>I want to add animation to it like <code>fadeIn</code> and <code>fadeOut</code> for the background image so when hover <code>fadeIn</code> effect apply for the background image and on mouseout <code>fadeOut</code> effect apply for the background image</p>

<p>How I can do it?</p>
