Navigation with fadeIn and fadeOut

HTML

<ul id="nav">
    <li>
        <a href="home.html"><span>Home</span></a>
        <img src="http://www.cawyatt.co.uk/home-button.png" alt="Home" title="Home" />
    </li>
    
    <li>
        <a href="contact.html"><span>Contact</span></a>
        <img src="http://www.cawyatt.co.uk/how-button.png" alt="Contact" title="Contact" />
    </li>
    
    <li>
        <a href="about.html"><span>About</span></a>
        <img src="http://www.cawyatt.co.uk/playstation-button.png" alt="About" title="About" />
    </li>
    
    <li>
        <a href="products.html"><span>Products</span></a>
        <img src="http://img-aws.ehowcdn.com/615x200/ehow/images/a07/cc/0q/make-text-glow-after-effects-800x800.jpg" alt="Products" title="Products" />
    </li>
</ul>

CSS

#nav { background: url("http://www.cawyatt.co.uk/nav-bg.png") no-repeat left top; list-style-type: none; margin:0px; padding:0px; overflow:hidden; }
#nav li { float:left; width: 120px; height:115px; position:relative;  }
#nav li a { font-size:16px; font-weight:bold; color:white; text-decoration:none; position:absolute; z-index:2; display:block; width: 120px; height: 115px; }
#nav li a span { text-align:center; position:Absolute; top: 70px; width: 120px; } 
#nav li img { position: absolute; z-index:1; top:0px; left: 0px; display:block; width: 120px; height: 115px; }

JavaScript

$('#nav li a').hover(
    function() {
        //fade out the span
        $(this).next('img').fadeOut(700);
    },
    function() {
        //fade in the span
        $(this).next('img').fadeIn(700);
    }
);