Change background image on menu hover in Wordpress - php

Question

Here is my site (click here) I 'm trying to get the background image to change on hover of a menu item, and I'm getting close! However, when I hover, the menu disappears and the swap back to the original image is not smooth like I'd like. Any ideas on how I can improve this??
<?php
/*
Template Name: Page - All Projects
*/
?>
<?php get_header(); ?>
<?php
/* #Start the Loop
======================================================*/
if (have_posts()) : while (have_posts()) : the_post();
?>
<?php
/* #Get Fullscreen Background
======================================================*/
$pageimage = get_post_meta($post->ID,'_thumbnail_id',false);
$pageimage = wp_get_attachment_image_src($pageimage[0], 'full', false);
ag_fullscreen_bg($pageimage[0]);
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
//rollover swap images with rel
var img_src = "$pageimage";
var new_src = "";
$(".rollover").hover(function(){
//mouseover
img_src = $(this).attr('src'); //grab original image
new_src = $(this).attr('rel'); //grab rollover image
$(this).attr('src', new_src); //swap images
$(this).attr('rel', img_src); //swap images
},
function(){
//mouse out
$(this).attr('src', img_src); //swap images
$(this).attr('rel', new_src); //swap images
});
//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function(){
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
})(jQuery);
</script>
<div class="contentarea">
<div id='cssmenu'>
<ul>
<li class='has-sub '><a href='#'>Center Consoles</a>
<ul>
<li class='sub'><a href='http://takeitto11.com/striper2015/portfolio/2oo-cc/'><img class="rollover" width="1500px" height="1000px" rel="http://takeitto11.com/striper2015/wp-content/uploads/2014/10/Striper_HPS_1500x150010.jpg" />200 CC</a></li>
<li class='sub'><a class="220CC" href='#'>220 CC</a></li>
<li class='sub'><a class="2605CC" href='#'>2605 CC</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>Dual Consoles</a>
<ul>
<li class='sub'><a class="200DC" href='#'>200 DC</a></li>
<li class='sub'><a class="220DC" href='#'>220 DC</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>Walk Arounds</a>
<ul>
<li class='sub'><a class="200WA" href='#'>200 Walk Around</a></li>
<li class='sub'><a class="220WA" href='#'>220 Walk Around</a></li>
<li class='sub'><a class="2601WA" href='#'>2601 Walk Around</a></li>
<li class='sub'><a class="2901WA" href='#'>2901 Walk Around</a></li>
</ul>
</li>
</div>
<div class="clear"></div>
</ul>
Thank You!!