Q:

Animating a background from image to fill

I have a menu with a black to transparent gradient.  When I hover the menu, I'd like to turn it into a completely black fill.  Why isn't the following working? 
$('#topmenu').hide().animate({
    'height': 'toggle'
    }, "slow").hover(function() {$(this).animate({ 'opacity' : 1 }).css( 'background' , 'rgb(0,0,0)', 'box-shadow' , "0px 5px 15px 0px rgba(0, 0, 0, 0.5)" );}, function() {$(this).animate({ 'opacity' : 0.6  }).css( 'background' , "url('<?php bloginfo('template_url'); ? >/images/topmenu_bg.png') repeat-x" );});

the menu's bg image is set through the stylesheet with the property 'background'. 
Thank you. 

A:

Why not this plain CSS? 
#topmenu {
    background-image:linear-gradient(to bottom,black,transparent);
    background-color:transparent;
    transition:background-color 1s ease;
    /* vendor-specific alternatives follow */
    background-image:-webkit-linear-gradient(top,black,transparent);
    -webkit-transition:background-color 1s ease;
}
#topmenu:hover {
    background-color:black;
}

Plain CSS is immeasurably faster than jQuery, both figuratively and literally since I have no idea how to measure CSS "speed" XD

