Question

I’m currently using CSS and an image sprite for my navigation (code below).
This works just as intended, however I’d like to ease this transition with a fade.

I believe it is best to use JQuery for this, however I would like to leave the CSS in order to add support for those with Javascript disabled. Can anybody point me in the right direction of how to achieve this ‘collaboration’?!

HTML:

<ul id="menu">
    <li id="home"><a href="#"></a></li>
</ul>

CSS:

nav
{
    margin-top: 17px;
    float: right;
}

nav #menu
{
    display: block;
    height: 22px;
    margin: 0px;
    padding: 0px;
}

nav #menu li
{
    list-style-type: none;
    float: left;
    padding-left: 28px;
}

nav #menu li a
{
    background: url(/Content/Images/navigation.png) no-repeat;
    height: 22px;
    display: block;
}

nav #menu #home 
{
    width: 53px;
}

nav #menu #home a:hover
{
    background-position: 0 -22px;
}

Answer 1

I would do one of two things:

1) Experiment with the animate function in jQuery.
2) Create a wrapper in the li:

<ul>
    <li><span class="bg-image" /><a href="#"></li>
</ul>

Then use jQuery like so:

$(document).ready(function () {
    $("#menu li a").bind("mouseover", function () {
        $(this).siblings("span.bg-image").css("background", "url(URL TO IMAGE)").hide().fadeIn(100);
    })
});

Repeat and use the not hot image for mouseout. I am assuming you would use a transparent place holder type image for the not hot state, make sure the width/height is the same for the hot class.