Hover functon grows slooow
Hello,
I've written a simple hover function that changes a list item's border color. When there are only a few list items, it works fine. However, with 10 or more <li>s, it grows extremely slow. Strangely, it is not slow directly after page load. It actually gets slower the longer the page sits.
I can't figure out what's causing it, but it's bad.
Here's the code
-
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);
});
}
Removing this function speeds everything up, so I know this is the problem.
The function is usually run after the list items are loaded through this script:
-
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();
})
});
}
Here's an example of the code in action:
http://www.stephenshaheen.com/piece.php?piece_id=28
Any help or advice would be greatly appreciated! Thank you.