jQuery animation choppy in FireFox

JavaScript
1

Here is a responsive slideshow with a gray-scale transition:
http://sandbox.resourcefurniture.com/slideshowtest.html

The markup is very light:

<div id='slideshow'>
	<img src="http://sandbox.resourcefurniture.com/rf-content/themes/resourceFurniture/images/home-page-slides/slide1.jpg">
	<img src="http://sandbox.resourcefurniture.com/rf-content/themes/resourceFurniture/images/home-page-slides/slide2.jpg">
	<img src="http://sandbox.resourcefurniture.com/rf-content/themes/resourceFurniture/images/home-page-slides/slide3.jpg">
</div>

CSS:

		body {
			margin:0;
			padding:0;
		}
		
		#slideshow {
			width:100%
		}
		
		#slideshow img {
			width:100%;
		}
		
		#slideshow .holder {
			width:100%;
			overflow:hidden;
			position:absolute;
			top:0;
			left:0;
			z-index:0;
			display:none;
		}
	
		#slideshow .active {
			display:block;
			z-index:999;
		}
		
		#slideshow .gactive {
			display:block;
			z-index:998;
		}
		
		#slideshow .next {
			display:block;
			z-index:997;
		}
		
		#slideshow img.grayscale {
			filter: url("data:image/svg+xml;utf8,<svg xmlns=\\'http://www.w3.org/2000/svg\\'><filter id=\\'grayscale\\'><feColorMatrix type=\\'matrix\\' values=\\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    		filter: gray; /* IE6-9 */
    		-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
		}

Is it possible to refine the JavaScript to make the transition smoother in FireFox and IE?

	$(document).ready(function(){
		
		//remove javascript disabled mode
		$('body').removeClass('nojs');
		
		//set up slideshow
		$('#slideshow img').each(function(){
			var src=$(this).attr('src');
			var replacements="<div class='holder'><img src='"+src+"' /></div><div class='holder'><img src='"+src+"' class='grayscale' /></div>";	
			$(this).replaceWith(replacements);
		});
		
		//set image widths
		var total_width=$('#slideshow').width();
		$('#slideshow img').width(total_width);
		
		$(window).resize(function(){
			total_width=$('#slideshow').width();
			$('#slideshow img').width(total_width);
		});
		
		//set first slide as active
		$('#slideshow .holder:first').addClass('active');
		
		 setInterval(function(){animateSlides()},5000);
	
		 function animateSlides(){
	
	 		var gactive= $('#slideshow .active').next().addClass('gactive');
	 		var next= $(gactive).next().addClass('next');
	 		if( next.length == 0 ) {
	 			next=$('#slideshow .holder:first').addClass('next');
	 		}
	 		
			 $('#slideshow .active').animate(
			 	{ "width": "-="+total_width+"px" }, 3000,'linear',
			 	function() {
					$(this).removeClass('active').removeAttr('style');
			 	 }
			 );
			 	
			 $(gactive).delay(1000).animate(
			 	{ "width": "-="+total_width+"px" }, 3000,'linear',
			 	function(){
			 		$(this).removeClass('gactive').removeAttr('style');
			 		$(next).addClass('active').removeClass('next');
			 	}
			 );
			
		 }
	
	});
</script>

Thank you
E

2

Sorry I can’t help you on this, but just had to drop by and say what a cool slideshow! Nice work :slight_smile:

3

Hey thank you!

4

your images have a very large file

try op[timising them, the smaller the file size the less rendering the browser has to do.

5

Thanks for the tip. I noticed it works better with a smaller viewport.