Jquery slide doesn't work on Chrome Mac and IE8

[cgull]

Hello,

I am trying some code I found on the net for a fade in/ fade out slideshow.

It is working fine on FF, Chrome and Safari on Windows.

On Chrome Mac, the slides appearing one below the other, on IE8 on Windows, the text under the slide, does not fade, it just displays all the text above each other.

The jquery code:

function slideSwitch() {
var $active = $('#slideshow div.active');
if ( $active.length == 0 )
$active = $('#slideshow div:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow div:first');
$active.addClass('last-active')
.animate({opacity : 0.0}, 1000);
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

The css:

#slideshow {
     position: relative;
    width: 212px;
        height: 210px;
        border: 1px solid #aaa;
        background: #fff;
}

#slideshow div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    opacity: 0.0;
}

#slideshow div.active {
    z-index: 10;
    opacity: 1.0;
}

#slideshow div.last-active {
    z-index:9;
}

p.slideTitle {
    color: #aaa7a7;
    font-weight: bold;
    padding-top: 10px;
    text-align: center;
}

The html:

<div id="slideshow">
    <div class="active"><a href="index.php?content=judaicart"><img src="images/slide/1.jpg" alt="" /></a>
        <p class="slideTitle">1 / <span class="red">Judaic Art</span></p>
    </div>
    <div><a href="index.php?content=judaicart"><img src="images/slide/2.jpg" alt="" /></a><p class="slideTitle">2 / <span class="red">Judaic Art</span></p></div>
    <div><a href="index.php?content=judaicart"><img src="images/slide/3.jpg" alt="" /></a><p class="slideTitle">3 / <span class="red">Judaic Art</span></p></div>
    <div><a href="index.php?content=judaicart"><img src="images/slide/4.jpg" alt="" /></a><p class="slideTitle">4 / <span class="red">Judaic Art</span></p></div>
    <div><a href="index.php?content=judaicart"><img src="images/slide/5.jpg" alt="" /></a><p class="slideTitle">5 / <span class="red">Judaic Art</span></p></div>
</div>

Can anyone please help me solve this? I'm not an expert on Jquery so any help would be very appriciated.

[cgull]

I have tried another code, this one works well everywhere, besides Chrome Mac version 19.0.1084.56

Jquery Code:

var $$ = $.fn;

$$.extend({
  SplitID : function()
  {
    return this.attr('id').split('-').pop();
  },

  Slideshow : {
    Ready : function()
    {
      this.Counter = 1;
      this.Interrupted = false;

      this.Transition();
    },

    Transition : function()
    {
      if (this.Interrupted) {
        return;
      }

      this.Last = this.Counter - 1;

      if (this.Last < 1) {
        this.Last = 3;
      }

      $('div#tmpSlide-' + this.Last).fadeOut(
        'slow',
        function() {
      //    $('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
        //  $('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
          $('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');

          $$.Slideshow.Counter++;

          if ($$.Slideshow.Counter > 3) {
            $$.Slideshow.Counter = 1;
          }

          setTimeout('$$.Slideshow.Transition();', 5000);
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $$.Slideshow.Ready();
  }
);

Css code:

div#slideshow {
    position: relative;
    width: 212px;
    height: 210px;
    border: 1px solid #aaa;
    background: #fff;
}

div.slide {
    position: absolute;
  top: 0;
  left: 0;
  width: 210px;
  height: 207px;
  display: none;
    z-index: 100;
}

div.slide img {
    float: left;    
}

div.slideCopy {
    color: #aaa7a7;
    font-weight: bold;
    text-align: center;
    font-size: 11px;
    width: 210px;
    float: left;
    margin-top: 10px;
}

Html code:

<div id="slideshow">
    <div id="tmpSlide-1" class="slide">
    <a href="index.php?content=judaicart"><img src="images/slide/1.jpg" alt="1" /></a>
    <div class="slideCopy"><p>1 / <span class="red">Judaic Art</span></p></div>
    </div>
    <div id="tmpSlide-2" class="slide">
    <a href="index.php?content=judaicart"><img src="images/slide/2.jpg" alt="2" /></a>
        <div class="slideCopy"><p>2 / <span class="red">Judaic Art</span></p></div>
    </div>
    <div id="tmpSlide-3" class="slide">
    <a href="index.php?content=judaicart"><img src="images/slide/3.jpg" alt="3" /></a>
    <div class="slideCopy"><p>3 / <span class="red">Judaic Art</span></p></div>
    </div>
    <div id="tmpSlide-4" class="slide">
    <a href="index.php?content=judaicart"><img src="images/slide/4.jpg" alt="4" /></a>
        <div class="slideCopy"><p>4 / <span class="red">Judaic Art</span></p></div>
    </div>  
</div>