Question

I am trying to use the background animate method in JQuery but it just doesn’t work. Here’s the code I am using for it.

$(".menu_item").mouseenter(function(){$(this).animate({backgroundColor: "#FF8040"}, 'fast');});
$(".menu_item").mouseleave(function(){$(this).animate({backgroundColor: "#999"}, 'fast');});

Any help is appreciated thanks.

---

Heres the rest of it.

The Html for the menu:

<div id="menu">
    <a href="index.html" id="home_menu" class="menu_item">Home</a>
    <a href="index.html" class="menu_item">Tutorials</a>
    <a href="index.html" class="menu_item">News</a>
</div>

and the script:

<script type="text/javascript">
    $(document).ready(function(){

        jQuery().ready(function(){
            $(".menu_item").mouseenter(function(){$(this).animate({backgroundColor: "#FF8040"}, 'fast');});
            $(".menu_item").mouseleave(function(){$(this).animate({backgroundColor: "#999"}, 'fast');});

            var pos = $("#fixed_head").position();
            var height = $("#fixed_head").height();
            var height2 = $("#menu").height();

            var screenHeight = $("body").height();
            var newHeight = screenHeight - height - height2;
            $("#container").css("top", (pos.top + height));
            $("#container").css("height", newHeight);
            $("#content").css("height", newHeight);

            $(window).resize(function() {
                var pos = $("#fixed_head").position();
                var height = $("#fixed_head").height();
                var height2 = $("#menu").height();

                var screenHeight = $("body").height();
                var newHeight = screenHeight - height - height2;
                $("#container").css("top", (pos.top + height));
                $("#container").css("height", newHeight);
                $("#content").css("height", newHeight);
            });

        });

    });
    </script>

and in the head:

<script type="text/javascript" src="jquery.js"></script>

Answer 1

If you use jQuery UI library your code should work. It has color transition effects for animate method.

Another way to write it is:

$(".menu_item").hover(function() {
    $(this).animate({
        backgroundColor: "#FF8040"
    }, 'fast');
}, function() {
    $(this).animate({
        backgroundColor: "#999"
    }, 'fast');
});​

DEMO: http://jsfiddle.net/kbKdY/