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: [LIST]
[*]standard-content.js
$("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
$(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
$("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
$(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
$("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));
}
});
[/LIST]
Change the selectors? Some unnecessary code? Some extremely bad coding?
How can I speed this up for Chrome and Opera?