Speeding up jQuery script, more efficient code not working

Hello,

I'm trying to improve a working script that slows down with high data volume.

Here's what it does:
When a thumbnail is rolled over, a corresponding div containing a larger image fades in (animate/opacity) elsewhere on the page.

When another thumb is rolled over, the class of larger image divs fades out, then the new div fades in.

With lots of thumbs, this gets slow. Each larger image div is dynamically written to html through php and hidden with css (opacity & display) until the jQuery fades it in, so from my understanding, those images are already loaded in the brower's cache. How can I reduce the lag in this animation? It's fine with a few thumbs, but very slow with a lot.

Any help would be appreciated. Thank you.


function thumb_to_mid(target_items, name){ //target items are rolled over, name is class of objects being animated
$("."+name+":first").css({"display" :"block"}).animate({"opacity" :"1"}, 2500);

if($(target_items).attr("rel") != "" && $(target_items).attr("rel") != "undefined" ){ //check to make sure rel isn't blank, then:
$(target_items).hover( function(){
var div_id = $(this).attr("rel"); //grab this elements rel attribute
var this_mid_div = $("#"+div_id); //set var for mid image element
$("."+name).animate({"opacity" :"0"}, 100); //fade out previous mid pic
$("."+name).css({"display" :"none"}); //hid previous mid pic
this_mid_div.css({"display" :"block"}); //show current mid pic
this_mid_div.animate({"opacity" :"1"}, 500); //fade in current mid pic
});
}
}



Here's an example of the page with only 2 thumbs. (http://www.stephenshaheen.com/piece.php?piece_id=2#)
Here's an example of the page with a lot of thumbs. (http://www.stephenshaheen.com/piece.php?piece_id=28#)

shows excessive cpu on a p4... (poor netbooks)

set another var to replace $("."+name).

in fact, move it outside the hover function, perhaps as the first line.

that way, the list of image is not re-built each time the image changes.

also, set a var to $(target_items).attr("rel"), so you don't have to assess it each time.


basically, try to avoid DOM-based $ usage, and you should see it get faster.

Thanks for the tips. After taking your advice, here's what the code looks like:


function thumb_to_mid(target_items, name){ //target items are rolled over, name is class of objects being animated
$("."+name+":first").css({"display" :"block"}).animate({"opacity" :"1"}, 2500); //fade in first thumb as place holder
var animate_obj_class = $("."+name);
var target_rel = $(target_items).attr("rel");

if(target_rel != "" && target_rel != "undefined" ){ //check to make sure rel isn't blank, then:
$(target_items).hover( function(){
var div_id = $(this).attr("rel"); //grab this elements rel attribute
var this_mid_div = $("#"+div_id); //set var for mid image element
animate_obj_class.animate({"opacity" :"0"}, 100); //fade out class of recently displayed image
animate_obj_class.css({"display" :"none"}); //hide class of recently displayed image
this_mid_div.css({"display" :"block"}); //show current mid pic
this_mid_div.animate({"opacity" :"1"}, 500); //fade in current mid pic
});
}
}


Still running slowly... the animations run quickly at first, and then slows down a little while after the page loads. I'm not sure if that gives a significant clue to what's going on.

I'm not very familiar with javascript so I'm not familiar with the most efficient ways to do things. Should this modification create an improvement?

I was also thinking that perhaps, instead of having the entire animate_obj_class fade out, I should have just the most recent image fade out. I'm not sure if the jQuery is actually modifying every individual element in the class, therefore slowing things down, but I'm REALLY struggling to get a working script that modifies the most recent item.

Does that make sense? Is it worth trying?

OK, so, I think that based on your tips, the function is working fine.

However! I think that I may have found the true culprit... it was the rollover effect! Why? Well I don't know. It's a pretty simple rollover effect, but once gone, everything speeds up entirely.

The thing is I still need the rollover... So I'm not sure what to so.

Here is the rollover script


function thumb_rollover(){
$(".thumb_li").hover( function(){
$(this).stop().animate({
"borderTopColor" : "#8EA6CF",
"borderRightColor" : "#8EA6CF",
"borderBottomColor" : "#8EA6CF",
"borderLeftColor" : "#8EA6CF"
}, 500);

}, function(){
$(this).stop().animate({
"borderTopColor" : "#444444",
"borderRightColor" : "#444444",
"borderBottomColor" : "#444444",
"borderLeftColor" : "#444444"
}, 500);
});

}


I don't know how I could really make it any simpler. It loads after the function thumb_load slides the thumbs in:

function thumb_load() {
$(".thumb_li").css({ "display" : "none" });
$(".thumb_img").css({ "opacity" : "0" });

$(".thumb_li").show("slide", {}, 1000, function(){
$(".thumb_img").animate( {"opacity" : "1" }, 2000, function(){
thumb_rollover();
})

});

}


Does any see any issue the these functions that would cause immense lag in hover animations?

I dont know too much about jquery...
i do know that $(".xxx") is a slow way to grab elements, but i don't see from the code here how often thumb_load() fires either. if it's just once, no biggie. if a lot, you might want to cache the dom lookups.

if you dont need the border to be animated, it would be faster to switch between two classes that define the hover/nonhover styles, and animate only the opacity.


play around with firebug's profile feature and you can likely figure out where the pinch points are in the context of the page.