Optimize jQuery hover code for better performance (smoother animation)
I've spent some time reading jQuery optimization tips lately, which has certainly helped improve the performance of my scripts.
However, I have this news section on my site that was hovering around with the mouse, and this section doesn't work very well in any browser other than Safari (and possibly Chrome too).
The reason for this, I believe, is that it does quite a bit of DOM movement and computation on every mouseover / mouseout event before animating.
My question is simple: is there a way to optimize the code below to make the animation run more smoothly?
$('#featuredSide .featuredBox,#featuredBottom .featuredBox,#archiveVideos .featuredBox').hover(function(){
var boxHeight = parseInt($(this).css('height'))-8;
var bottomOrSide = $(this).parents("div[id^='featured']").attr("id")
var captionPos = 76;
var captionHeight = parseInt($(this).find(".videoCaption").css('height'));
var animateTo = boxHeight-captionHeight;
$(".videoCaption", this).stop().animate({top:animateTo + 'px'},{queue:false,duration:160});
}, function() {
$(".videoCaption", this).stop().animate({top:captionPos},{queue:false,duration:100});
});
Since the site I'm working on isn't published yet, I've uploaded a screenshot of the news section to give you an idea of what it looks like.
Thank!
source to share
Another solution would be to memoize all calculations.
Don't call hover directly, use "every", calculate and then use "hover".
This way (I tried to change the code as little as possible):
$('#featuredSide .featuredBox,#featuredBottom .featuredBox,#archiveVideos .featuredBox').each(function(){
var boxHeight = parseInt($(this).css('height'))-8;
var bottomOrSide = $(this).parents("div[id^='featured']").attr("id")
var captionPos = 76;
var captionHeight = parseInt($(this).find(".videoCaption").css('height'));
var animateTo = boxHeight-captionHeight;
var params = {top:animateTo + 'px'};
var options = {queue:false,duration:160};
var target = $(".videoCaption", this);
$(this).hover(function () {
target.stop().animate(params, options);
});
}
This solution would make my previous answer somewhat controversial (they won't make much of a difference, although they still apply). However, remember the profile.
source to share
For the starter, you can do Generic Subexpression Exception , so, for example, instead of calling
$(this)
multiple times, store this object in a variable and use that variable instead.
var current = $(this);
On the other hand, single user variables can be inlined. Some may call them premature optimizations, but since it has already been said that the code is slow, I don't think this is premature.
The bottomOrSide variable doesn't seem to be used there.
As far as the selector is concerned, is it possible to replace this long thing with this?
$('.featuredBox')
source to share
You do some of the work several times, which will hurt you. How much hard to say, but try this ...
var el = $(this);
var vid = $(".videoCaption", this);
// use el.blar() instead of $(this) and vid.blar() instead of $(".videoCaption", this).blar()
It also looks like your dom structure should be different in all the different places this panel is used, as your code seems to have to do a fair job of finding the appropriate dom bits to use. If possible, I would recommend making the DOM structure the same in all different places and then using that structure in your code.
If this is not possible, try to code a unique version of this function for each location - not ideal, but if it solves your performance problem it might be worth it.
source to share