SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    jQuery animation choppy in FireFox

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

    The markup is very light:

    Code HTML4Strict:
    <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:

    Code 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?

    Code JavaScript:
    	$(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. #2
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    158
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Sorry I can't help you on this, but just had to drop by and say what a cool slideshow! Nice work

  3. #3
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey thank you!

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip. I noticed it works better with a smaller viewport.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •