$('#nav a')
	.css( {backgroundPosition: "0 0"} )
	.mouseover(function(){
		$(this).stop().animate(
			{backgroundPosition:"(0 -250px)"}, 
			{duration:500})
		})
	.mouseout(function(){
		$(this).stop().animate(
			{backgroundPosition:"(0 0)"}, 
			{duration:500})
		})


<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

======================================================

$(function() {
02.    $('.rollover').hover(function() {
03.        var currentImg = $(this).attr('src');
04.        $(this).attr('src', $(this).attr('hover'));
05.        $(this).attr('hover', currentImg);
06.    }, function() {
07.        var currentImg = $(this).attr('src');
08.        $(this).attr('src', $(this).attr('hover'));
09.        $(this).attr('hover', currentImg);
10.    });
11.});

<img src="first.gif" hover="second.gif"  class="rollover"/>

$('img[hover]').hover(function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    }, function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    });


-------------------------------


ul {
	list-style:none;
	margin:0;
	padding:0;
}
li {
	float:left;
	width:100px;
	margin:0;
	padding:0;
	text-align:center;
}
li a {
	display:block;
	padding:5px 10px;
	height:100%;
	color:#FFF;
	text-decoration:none;
	border-right:1px solid #FFF;
}
li a {
	background:url(bg.jpg) repeat 0 0;
}
li a:hover {
	background-position:50px 0;

}

-----------------------------------------------------------------------

$(function() {
  $("#menu img").hover(function() {
    $(this).attr("src", $(this).attr("src").split(".").join("-hover."));
  }, function() {
    $(this).attr("src", $(this).attr("src").split("-hover.").join("."));
  });
});


<ul id="menu">
	<li><a href="#"><img src="item1.gif" /></a></li>
	<li><a href="#"><img src="item2.gif" /></a></li>
	<li><a href="#"><img src="item3.gif" /></a></li>
</ul>

--------------------------
pngfix.js
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->