One issue I am facing is with the menu on my homepage. I would like the menu options to enlarge upon hover, and while I have achieved this effect, there is a flaw in the animation:
When I move my cursor away before the animation completes, the option abruptly stops and deducts 30 pixels from its width, causing it to intersect with other animations and yielding inaccurate results.
For example:
If I quickly hover over menu option 1, it expands slightly, let's say by 10 pixels. But as I move away, the width decreases by 30 pixels, resulting in a smaller button size overall.
I am looking for a way to track the movement during the hover animation and only reduce the width by that amount when the cursor leaves. Or, perhaps there is a simpler solution available...
Below is the code snippet in question:
$('.menu_option').hover(
function() {
var w = $(this).width()+30+"";
$(this).stop().animate({ width:w}, 150, 'easeOutQuad');
}, function() {
var w = $(this).width()-30+"";
$(this).stop().animate({ width:w}, 150, 'easeOutQuad');
});