Hi all,

On a website we've built, we use two bits of jquery to make an array of images display in an animated loop (seen in the darker blue boxes on top of the homepage). This seems to work fine, but some people (mostly Mac/Safari users) notify us that these loops stuck between images, stop working or display the images in a shifting/flickering manner.

I'm on WinVista/FF 3.6, and I don't experience any of these issues.

This is the JS used on the page:

Code JavaScript:
<script type="text/javascript">
$( function () {
	$("div.thumbnail a:not(:first)").hide()
	$("div.thumbnail a:first").addClass("current");
 
	setInterval( function () {
		var $active = $("div.thumbnail a.current");
 
		if($active.length == 0)
			$active = $("div.thumbnail a:first");
 
		$next = $active.next().length ? $active.next() : $("div.thumbnail a:first");
 
		$active.removeClass("current").fadeOut('slow');
		$next.addClass("current").fadeIn('slow');
	}, 4000);
});
 
$( function () {
	$("div.thumbnail2 a:not(:first)").hide()
	$("div.thumbnail2 a:first").addClass("current");
 
	setInterval( function () {
		var $active = $("div.thumbnail2 a.current");
 
		if($active.length == 0)
			$active = $("div.thumbnail2 a:first");
 
		$next = $active.next().length ? $active.next() : $("div.thumbnail2 a:first");
 
		$active.removeClass("current").fadeOut('slow');
		$next.addClass("current").fadeIn('slow');
	}, 4000);
</script>
});

This is the according HTML:

Code HTML4Strict:
<!-- load featured project -->
<div id="feat_project">
 
<div class="thumbnail2">
<a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad"]http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad[/URL]"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7a-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7a-127x85.jpg[/URL]" alt="fwpbu7a" /></a>
<a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad"]http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad[/URL]"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7h-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7h-127x85.jpg[/URL]" alt="fwpbu7h" /></a>
<a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad"]http://www.demooistezwembaden.be/buiten-zwembad-zwembad-betonnen-zwembad-moza%c3%afek-zwembad-overloopbad[/URL]"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7kkopie-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/04/fwpbu7kkopie-127x85.jpg[/URL]" alt="fwpbu7kkopie" /></a>
</div>
 
    	<div class="cat_info">
    	<div class="cat_title">project in de kijker</div>
    	<div class="cat_desc">Klik op de foto en ontdek hier maandelijks &eacute;&eacute;n unieke, nieuwe realisatie</div>
    	</div>
 
</div>
 
<!-- load latest projects -->
<div id="latest">
 
<div class="thumbnail">
        <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buitenzwembad-met-houten-terras-polyester-monoblock"]http://www.demooistezwembaden.be/buitenzwembad-met-houten-terras-polyester-monoblock[/URL]"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/08/flpwkn4-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/08/flpwkn4-127x85.jpg[/URL]" alt="flpwkn4" /></a>
 
        <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buitenzwembad-overloopzwembad-in-tuin-van-kasteel"]http://www.demooistezwembaden.be/buitenzwembad-overloopzwembad-in-tuin-van-kasteel[/URL]"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/08/fqpk12-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/08/fqpk12-127x85.jpg[/URL]" alt="fqpk1" /></a>
 
        <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/buitenzwembad-aanleggenmonoblock-overloop-zwembad"]http://www.demooistezwembaden.be/buitenzwembad-aanleggenmonoblock-overloop-zwembad[/URL]"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/08/fadf1-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/08/fadf1-127x85.jpg[/URL]" alt="fadf1" /></a>
 
        <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/binnenzwembad-onderloopzwembad-met-jetstream-sfeervolle-verlichting"]http://www.demooistezwembaden.be/binnenzwembad-onderloopzwembad-met-jetstream-sfeervolle-verlichting[/URL]"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/07/fqp11-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/07/fqp11-127x85.jpg[/URL]" alt="fqp1" /></a>
 
        <a href="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/binnenzwembad-overloopzwembad-bekleed-met-zwarte-moza%c3%afek"]http://www.demooistezwembaden.be/binnenzwembad-overloopzwembad-bekleed-met-zwarte-moza%c3%afek[/URL]"><img width="127" height="85" src="[URL="http://www.sitepoint.com/forums/view-source:http://www.demooistezwembaden.be/wp-content/uploads/2011/07/fwpbi7akopie-127x85.jpg"]http://www.demooistezwembaden.be/wp-content/uploads/2011/07/fwpbi7akopie-127x85.jpg[/URL]" alt="fwpbi7akopie" /></a>
 
</div>
 
    	<div class="cat_info">
    	<div class="cat_title">recent toegevoegde projecten</div>
    	<div class="cat_desc">Klik op een foto voor de laatste nieuwe galerijen</div>
    	</div> 
</div>
 
</div>

Does anyone know how to make this problem go away? Are these two instances that use the same scripting somehow in conflict?

Thanks in advance for your assistance.

Stef