Problem with Jquery script being slow.

[Johns3n]

Hi PHPfreaks!

 

I'm having some problems with a Jquery script that i've wrote! What it suppose to do is animate a top menu with some background positions when mouseenter() and animate some divs on mouseenter and mouseleave. It works PERFECT in every browser! Except Internet Explorer 7 and 8 (IE9 works perfect).

 

In Internet Explorer 7 and 8 it takes forever to load and when it finally loads, none of the javascript works and the page seems sluggish and unresponsive! And my deadline for this project is coming up and i've been using way to long to try and fix this error in Internet Explorer 7 and 8! Which is now why i turn to you! for YOUR HELP! and don't make me beg, because I will, with boot licking and everything! 

 

below here is a copy pasta of the javascript that i've written! I based it of this code:

 

$(document).ready(function() {

  /* -- CUFON JAVASCRIPT -- */
  Cufon.replace('ul#nav li a, span.produkt_pris, span.produkt_solv_pris, span.produkt_bronze_pris');
  Cufon.replace('h1, h2, h3', {
textShadow: '#1371a4 0px 2px'
  });

  /* -- JQUERY SCALE -- */
  $(function() {
	$('#box-1, #box-2, #box-3, #box-4, #box-5, #box-6, #box-7, #box-8').bind('mouseenter', function() {
		  
		  /* ENLARGE CHILDREN OF $this */
		  $(this).children('img.produkt').stop(true, true).animate({
			  width: '160',
			  height: '121'
		  }, {
			  queue: true,
			  duration: 'fast'
		  })
		  $(this).children('img.firma').stop(true, true).animate({
			  width: '130',
			  height: '85'
		  }, {
			  queue: true,
			  duration: 'fast'
		  })
		  $(this).children('img.cta').stop(true, true).animate({
			  width: '110',
			  height: '39',
			  top: '218',
			  left: '80'
		  }, {
			  queue: true,
			  duration: 'fast'
		  })
  
		  
		  /* ENLARGE $this ON MOUSEENTER */
		  $(this).css("z-index", "5000000")
		  $('#box-1, #box-2, #box-3, #box-4, #box-5, #box-6, #box-7, #box-8').not(this).stop(true, true);
		  $(this).stop(true, true).animate({
			  width: '270',
			  height: '270'
		  }, {
			  queue: true,
			  duration: 'fast'
		  })

	});
	$('#box-1, #box-2, #box-3, #box-4, #box-5, #box-6, #box-7, #box-8').bind('mouseleave', function() {

		/* SHRINK THE CHILDREN OF $this */
		$(this).children('img.produkt').stop(true, true).animate({
			width: '132',
			height: '100'
		}, {
			queue: true,
			duration: 'fast'
		})	
		$(this).children('img.firma').stop(true, true).animate({
			width: '87',
			height: '57'
		}, {
			queue: true,
			duration: 'fast'
		})
		$(this).children('img.cta').stop(true, true).animate({
			width: '96',
			height: '34',
			top: '175',
			left: '102'
		}, {
			queue: true,
			duration: 'fast'
		})	

		/* SHRINK $this ON MOUSELEAVE */
		$(this).css("z-index", "5000")
		$('#box-1, #box-2, #box-3, #box-4, #box-5, #box-6, #box-7, #box-8').not(this).stop(true, true);
		$(this).stop(true, true).animate({
			width: '218',
			height: '218'
		}, {
			queue: true,
			duration: 'fast'
		})
	});
});

/* -- JQUERY HOVER -- */
$('ul#nav li a')
.css( {backgroundPosition: "0 64px"} )
.mouseenter(function(){
	$(this).stop().animate(
		{backgroundPosition:"0 0"}, 
		{duration:200})
	})
.mouseleave(function(){
	$(this).stop().animate(
		{backgroundPosition:"0 64px"}, 
		{duration:200})
});

});

 

And yes this is the code because that makes IE 7 and 8 seem slow, because when I remove it, the site instantly loads!

 

And thank you soooo much for the help in advance everyone!

[Adam]

I'm guessing the problems are down to the selectors. IE6/7 have no support for the internal querySelector / querySelectorAll methods, which jQuery utilizes where possible to improve performance. IE8 has support but only in standards mode. I would start there...

 

For example:

 

#box-1, #box-2, #box-3, #box-4, #box-5, #box-6, #box-7, #box-8

 

This would be better done with a shared class. If you also prefix the class name with the element tag, that would heavily cut down the amount of elements to check. Since you also use it in two binds, you can store the object within a variable and re-use it:

 

var $boxes = $('div.boxes');

$boxes.bind(...);
$boxes.bind(...);

 

Also within the event handler, you use $(this) a lot, which again to avoid recreating the jQuery object from this every-time, you can store it within a variable:

 

var $this = $(this);

 

You also use the full #box-1, #box-2 [..] selector a couple of times within the event handler instead of $this.