Hi, I have two websites which both use JavaScript (mostly jQuery) and I find that some animations and css-modification run very slow in Chrome, and also pretty slow in Opera. I find myself trying to speed up my code somehow, however it runs smooth in Firefox and - for the first time ever - even in IE.

The websites are: http://petlid.net23.net/ with belonging js files:
http://petlid.net23.net/js/image-rotator.js
http://petlid.net23.net/js/standard-content.js

and http://petlid.net23.net/munin2/ with belonging js files:
http://petlid.net23.net/munin2/js/standard-content.js
http://petlid.net23.net/munin2/js/image-gallery.js
http://petlid.net23.net/munin2/js/animate-clouds.js
http://petlid.net23.net/munin2/js/topic-holder_V2.js

In case you want to read it right here:
  • standard-content.js
    Code:
    $("document").ready(function(){
    
    	$(".infoBar").hide();
    				
    				
    	navigator.sayswho= 
    		(function(){
    		
    			var N= navigator.appName, ua= navigator.userAgent, tem;
    			var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    										
    			if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    			M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
    			return N;
    			
    		})();
    		
    	var cover = $('.cover');
    	var aboutDIV = $('#about');
    	var infoBarCLASS = $('.infoBar');
    	var pBarDIV = $('#pBar');
    	var pBarExtensionDIV = $('#pBarExtension');
    
    	var maxOpacity = 1;
    	var opacitySlide = maxOpacity;
    	var maxShadowSize = 20;
    	var shadowSize = 1;
    	var shadowGrow = true;
    	var runShadowGrow = true;
    	var shadowInterval;
    	var maxExtendSize = navigator.sayswho == "Microsoft Internet Explorer" ? 389:
    					navigator.sayswho == "Opera" ? 385: 
    					navigator.sayswho == "Netscape" ? 386:
    					389;
    	
    	$(aboutDIV).click(function (){
    		$(cover).stop().fadeToggle("slow");
    	});	
    
    	$("#pBar, #pBarExtension").on("mouseover", function(){
    		
    		clearInterval(shadowInterval);
    		shadowInterval = setInterval(animateShadow, 50);
    				
    	});	
    	
    	
    	function animateShadow(){
    			
    		if(shadowGrow && shadowSize < maxShadowSize){
    			shadowSize++;
    			if(shadowSize == maxShadowSize) shadowGrow = false;
    		}
    		
    		else if(!shadowGrow){
    		
    			shadowSize--;
    			if(shadowSize == 5) shadowGrow = true;
    		}						
    		$(pBarDIV).css("box-shadow", "0px 0px " + shadowSize + "px #0dd9ff");
    						
    	}
    
    
    	function declineShadow(){
    							
    		if(shadowSize >0){ 
    	
    			shadowSize--;
    			$(pBarDIV).css("box-shadow", "0px 0px " + shadowSize + "px #0dd9ff");
    		}				
    
    		else{
    			
    			clearInterval(shadowInterval);
    			shadowInterval = setInterval(raiseMouseOutShadow, 10);
    			shadowGrow=true;
    		}
    	}
    	
    	
    	function raiseMouseOutShadow(){ 
    	
    		$(pBarDIV).css("box-shadow", "0px 0px " + shadowSize + "px black");
    	
    		if(shadowSize<maxShadowSize){
    				shadowSize++;
    		}
    		
    		else{ clearInterval(shadowInterval); shadowSize = 0;}
    				
    	}
    		
    	
    	$("#pBar, #pBarExtension").on("mouseout", function(){
    		
    		runShadowGrow = false;
    		clearInterval(shadowInterval);
    		shadowInterval = setInterval(declineShadow, 20);
    			
    	});
    
    	
    	$(pBarDIV).click(function(){
    	
    		if($(pBarExtensionDIV).width() == 0 || $(pBarExtensionDIV).width() == maxExtendSize){
    	
    			if($(pBarExtensionDIV).width() != 0){
    				$("#pBarExtension p").fadeToggle();
    				$(infoBarCLASS).fadeToggle();
    			}
    	
    		var width = $(pBarExtensionDIV).width() > 0 ? 0: maxExtendSize;
    					
    		$(pBarExtensionDIV).animate({
    		
    			width:width,
    			opacity:opacitySlide
    			}, 800, function() {
    			 
    				opacitySlide = opacitySlide == maxOpacity ? 0: maxOpacity;
    			 
    				if($(pBarExtensionDIV).width() != 0){
    					
    					$("#pBarExtension p").fadeToggle();
    					$(infoBarCLASS).fadeToggle();
    				}
    			});
    			
    		}
    		
    	});
    	
    });
  • image-rotator.js
    Code:
    $(document).ready(function(){
    	
    	//This keeps track of the slideshow's current location
    	var current_panel = 1;
    	//Controlling the duration of animation by variable will simplify changes
    	var animation_duration = 800;
    	var width = 596;
    	var divID = $("#imageSlider");
    	var animationInterval = setInterval(animateTimerBar, 10);
    	
    	$(".project").hover(function(){
    		
    		clearInterval(animationInterval);
    		animationInterval = setInterval(animateTimerBar, 20);
    		
    	}, function(){
    	
    		clearInterval(animationInterval);
    		animationInterval = setInterval(animateTimerBar, 10);
    	
    	});
    	
    	$("#bulletin1").click(function(){nextImage(3); width=596;});
    	$("#bulletin2").click(function(){nextImage(1); width=596;});
    	$("#bulletin3").click(function(){nextImage(2); width=596;});
    
    	
    	function nextImage(nr){
    		
    		$("#bulletinHolder li").each(function(){
    			  if($(this).attr("class") == "current")
    				$(this).removeClass();
    				
    		});	
    	
    		switch(nr){
    													
    				case 1:
    					divID.stop().animate({left: "-700px", top: "0px"}, {duration: animation_duration}); /*easing: 'easeOutBack',*/
    					current_panel = 2;
    					$("#bulletin2").addClass('current');
    				break;
    				
    				case 2:
    					divID.stop().animate({left: "-1400px", top: "0px"}, {duration: animation_duration});
    					current_panel = 3;
    					$("#bulletin3").addClass('current');
    				break;
    				
    				case 3:
    					divID.stop().animate({left: "0px", top: "0px"}, {duration: animation_duration});
    					current_panel = 1;
    					$("#bulletin1").addClass('current');
    				break;
    		}
    	}
    	
    	function animateTimerBar(){
    		
    		if(width==0){
    
    			nextImage(current_panel);
    			width = 596;
    		}
    		
    		width -= 1;
    		$("#timerBar").css("width", width + "px");
    	}
    	
    });
  • image-gallery.js
    Code:
    $("document").ready(function(){
    
    		var current_Image = 0;
    		
    		var imageList = $('ul[id$=images]').children();
    		$(imageList[0]).fadeIn(1000);
    				
    		setInterval(function(){
    
    			$(imageList[current_Image]).fadeOut(2000);
    			
    			if(current_Image != $(imageList).length-1){
    			
    				$(imageList[(current_Image+1)]).fadeIn(2000);
    				current_Image++;
    				
    			}
    			
    			else{
    			
    				$(imageList[0]).fadeIn(2000);
    				current_Image = 0;
    			}
    
    		}, 5000);
    
    });
  • animate-clouds.js
    Code:
    $(document).ready(function(){
    			
    		
    		var speed = [16000, 12000, 14000];
    		var children=$('div[id$=logoDiv]').children();
    		var stopped = false;
    		
    		$('.cloud').each(function(){
    		
    			$(this).css("left", "1000px");
    			
    		});
    		
    		moveClouds();
    		
    		
    		
    		function moveClouds(){
    		
    						
    			for(var i=0; i<children.length; i++){
    				
    				
    				$(children[i]).animate({left:-300}, speed[i], function(){
    					$(this).css("left", "1000px");
    					moveClouds();
    				});
    
    			}	
    					
    		}
    });
  • topic-holder_V2.js
    Code:
    $("document").ready(function(){
    
    	var hrDiv = 'div[id$=horizontalRuler]';
    	var topicHolderItem = 'ul[id$=topicHolder] li';
    	var expansionDiv = 'div[id$=expansion]';
    	
    	
    	$(topicHolderItem).hover(function(){
    				
    		$(this).children(hrDiv).css("box-shadow", "0px 0px 10px " + $(this).children(hrDiv).css("borderTopColor"));
    		
    	}, function(){
    				
    		$(this).children(hrDiv).css("box-shadow", "0px 0px 0px black");
    				
    	});
    				
    				
    	$(topicHolderItem).click(function(){
    		
    		var index = $(this).index();
    											
    		if($("#expansion").css("opacity") != 1  ){
    		
    			showDiv($(this), index);
    			
    		}
    		
    	
    		
    		
    		else if($(expansionDiv).css("opacity") !=0 && $(this).children(hrDiv).css("borderTopColor") != $(expansionDiv).css("borderTopColor")){
    			hideDiv(index, showDiv, $(this), 500);
    		}
    		
    		else hideDiv();
    
    	});
    	
    					
    	function showDiv(id, index, speed){
    	
    		$(expansionDiv).css("borderTopColor", id.children(hrDiv).css("borderTopColor"));
    		
    		$(".topic").each(function(){
    			$(this).css("display", "none");
    		});
    				
    		speed = speed == null ? 1000: speed;
    		
    		$(expansionDiv).stop().animate({opacity:1, width:900}, speed, 
    				
    			function(){
    				$(expansionDiv).stop().animate({height:500}, (speed), function(){
    					
    					scrollDown(speed);
    					$("div[id$=topic" + (index+1) + "]").fadeIn(1500);
    					
    					speed = 1000;
    				});
    					
    			}
    		);
    		
    	}
    	
    	
    	function hideDiv(index, callback, id, speed){		
    	
    		speed = speed == null ? 1000: speed;
    		
    		$(expansionDiv).stop().animate({height:0}, speed, function(){ 
    			$(expansionDiv).stop().animate({opacity:0, width:0}, speed, function(){
    			
    				callback(id, index, speed); 
    				$(".topic").each(function(){
    					$(this).css("display", "none");
    				});
    				
    				speed = 1000;
    			});
    		});
    	}
    	
    
    	function scrollDown(speed){					
    		$('body, html').stop().animate({scrollTop: $(expansionDiv).position().top}, (speed*3));
    	}
    
    });



Change the selectors? Some unnecessary code? Some extremely bad coding?

How can I speed this up for Chrome and Opera?