Problem with IE in customized javascript slideshow (nivo) on rollover

Question

Hello everyone!~ I am using the fabulous Nivo Slideshow (http://nivo.dev7studios.com/) without problems throughout a website I am currently working on. However, for the slideshow on the homepage, I modified it to swap the image on rollover (in this case the swapped image is a black and white version of the same image). On rollover I also set the css to change the caption text and background colors. This is working pretty well for the most part (not quite as smooth as I'd like it to be). But in IE the image flickers when the mouse moves back and forth over the top edge of the caption area.

Here is a link to view: http://www.arcaspicio.squarespace.com - you can see the slideshow on the homepage, and if using IE can see that there is a flickering problem when rolling the mouse over the top edge of the caption area. (the caption is styled to be large and cover most of the image as an overlay - formatting is not completely worked out yet).

Here is the slideshow on the page:

<script type="text/javascript">
<!--

$(window).load(function() {
   $('#HomeSlideshow').nivoSlider({
      effect:'sliceDown', // Transition style: 'fold,fade,sliceDown'
      slices:1,
      animSpeed:500,
      pauseTime:5000,
      startSlide:0, // Set starting Slide (0 index)
      directionNav:false, // Next & Prev btns
      directionNavHide:true, // Only show on hover
      controlNav:false, // Navigation buttons
      controlNavThumbs:false, // Use thumbnails for Control Nav
      controlNavThumbsFromRel:false, // Use image rel for thumbs
      controlNavThumbsSearch: '.jpg', // Replace this with...
      controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
      keyboardNav:true, // Use left & right arrows
      pauseOnHover:true, // Stop animation while hovering
      manualAdvance:false, // Force manual transitions
      captionOpacity:0.6, // Caption opacity
      beforeChange: function(){},
      afterChange: function(){},
      slideshowEnd: function(){} // Triggers after all slides have been shown
   });
});
-->
</script>

<div id="HomeSlideshow" class="slideshow">
<img src="/storage/SlideshowImages/HomeSlideshow1_1.jpg" title="We<br/>Offer<br/>Innovative &<br/>Proven<br/>Solutions" />
<img src="/storage/SlideshowImages/HomeSlideshow2_1.jpg" title="Driven<br/>by a Passion<br/>for Homeland Security" />
</div>

And here is the bit in my for the rollover/ image-swap modification:

/* home slideshow rollovers */
$('#HomeSlideshow').live('mouseover mouseout', function(event) {
    $('.nivoSlider, .nivo-slice').each(function(){ 
    var $th = $(this);
    var src = $(this).css('background-image');

    if (event.type == 'mouseover') {
      var newSrc = src.replace(/_1.jpg/, '_2.jpg');
      $th.css('background-image', newSrc)
      $(".nivo-caption").css({'background-color': '#000000', 'color': '#ffffff'});
    } else {
      var newSrc = src.replace(/_2.jpg/, '_1.jpg');
      $th.css('background-image', newSrc)
      $(".nivo-caption").css({'background-color': '#ffffff', 'color': '#263F6A'});
    }
  });
});

Any help getting this idea to work smoother overall would be great! I'm sure there is a much better way to go about this! Much appreciated!! + D .