Image Animation in IE 8

Image Animation in IE 8

First off, I'm not a jQuery expert so I'm kind of fumbling in the dark here.

I'm trying to get a simple series of images to fade sequentially to create a slide show/image rotator effect. The effect works flawlessly in Firefox, Chrome, Safari and even IE 7 but for some reason nothing happens in IE 8. The slide show images don't display at all and the only thing that is visible is the default background image.

If you go to www.dominicancoffee.net you'll see the issue in (in)action (in you're using IE8).

The relevant code from the page is:
  2. <div id="header-content">
  3. <!-- Facebook Badge START -->
  4.             <a href="http://www.facebook.com/pages/Dominican-Coffee/111633487205" target="_TOP" title="Dominican Coffee">
  5. <img src="media/facebook-badge.gif" width="195" height="26" style="border: 0px; position: absolute; left: 0px; top: 0px; z-index: 100;" alt="Facebook Badge"/></a>
  6.       <!-- Facebook Badge END -->

  8.       <!-- Twitter Badge START -->
  9.             <a href="http://www.twitter.com/marzan1"  target="_TOP">
  10.             <img src="media/follow-on-twitter.jpg" alt="Twitter Badge" width="219" height="26" style="border: 0px; position: absolute; left: 195px; top: 0px; z-index: 100;"/></a>
  11.       <!-- Twitter Badge END -->

  13. <!-- jQuery Image Rotator -->
  14. <script type="text/javascript">
  15.         $(function() {
  16.             // create the image rotator
  17.             setInterval("rotateImages()", 5000);
  18.         });

  20.         function rotateImages() {
  21.             var oCurPhoto = $('#photoShow div.current');
  22.             var oNxtPhoto = oCurPhoto.next();
  23.             if (oNxtPhoto.length == 0)
  24.                 oNxtPhoto = $('#photoShow div:first');

  26.             oCurPhoto.removeClass('current').addClass('previous');
  27.             oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
  28.                 function() {
  29.                     oCurPhoto.removeClass('previous');
  30.                 });
  31.         }
  32.     </script>

  34. <!-- Slide Show Images -->
  35. <div id="photoShow">
  36. <div class="current"><img width="960px" height="160px" alt="Dominican Gold Coffee Wholesale" src="http://www.mtfarmerdesign.com/dg/banner-1.jpg" /></div>
  37. <div><img width="960px" height="160px" alt="Dominican Gold Coffee Wholesale" src="http://www.mtfarmerdesign.com/dg/banner-2.jpg" /></div>
  38. <div><img width="960px" height="160px" alt="Dominican Gold Coffee Wholesale" src="http://www.mtfarmerdesign.com/dg/banner-3.jpg" /></div>
  39. </div>

What am I missing here? Is there something about IE8 that I'm not aware of.

Oh yeah, if it helps, the site is driven by one of those cheap storefront packages that come from an ISP and it looks like it's running jQuery 2.5.18. Unfortunately I don't have any control over this so if it's a version-related issue are there any work-arounds?

Your help is massively appreciated!

Mark