I'm building a WordPress site with a nice jQuery effect that fades/unfades images within a navigation menu on rollover. So when the mouse moves off the image, the colored image should fade back to reveal the original non-colored image. This works perfectly as-is, but client wants the active page to keep its colored/ highlighted menu image when mouse has moved off of it.

The bolded line of the code is where I tried to set that up...

Code:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>		

		<script type="text/javascript"><!-- this is from http://jqueryfordesigners.com/image-cross-fade-transition/-->
		// make nav images highlight on hover
		// when the DOM is ready:
		$(document).ready(function () {
		   // find the navigation elements and hook the hover event
		   $('#mainmenu li').hover(function() {
    		  // on hovering over, find the element we want to fade *up*
    		  var fade = $('> div', this);
    
    		  // if the element is currently being animated (to a fadeOut)...
    		  if (fade.is(':animated')) {
      		    // ...take it's current opacity back up to 1
     		    fade.stop().fadeTo(250, 1);
    		  } else {
      		    // fade in quickly
      		    fade.fadeIn(250);
    		  }
  		}, function () {
    		  // on hovering out, fade the element out
    		if (!is_page(current)){  
			var fade = $('> div', this);
    		  	if (fade.is(':animated')) {
    		    	fade.stop().fadeTo(3000, 0);
    			} else {
      		  	// fade away slowly
      		  	fade.fadeOut(2000);
			}
    		}
  	     });
	});
	</script>

		<ul id="mainmenu">
			<li id="home">
				<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_inactive.png" alt="home" width="152" height="309" /></a>
				<div>
   					<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_active.png" alt="home" width="152" height="309" /></a>
  				</div>	
			</li>
WordPress should know whether the page is 'current' or not, so why doesn't this work? Currently the nav images remain highlighted when the mouse moves away. If I remove my attempt (the bolded line of code) then nav rollovers work beautifully, but active page still isn't represented with a colored nav menu image.