Question

I have a page with several image thumbnails that have their opacity set to 0.6 until the mouse hovers over it: Then, I animate the opacity to 1.0, and also show a small floater div with the title of the video that follows the cursor. Like this…

CSS:

#theFloater { background-color: #444; color: #FFF; position: absolute; display: none; font-family: Arial, Helvetica, sans-serif; font-size: .85em; z-index:25;}
#reelList img { height: 20px; display: inline-block; margin: 0; z-index: 1}

jQuery:

$('#reelList li').hover(function(){
    $(this).find('img').animate({opacity: 1.0}, 200, function(){});
    $('#theFloater').html(theTitles[$(this).index()]);
    $('#theFloater').show();
}, function(){
    $(this).find('img').animate({opacity: 0.6}, 200, function(){});     
    $('#theFloater').hide();                            
});

var mouseX;
var mouseY;

$("a img").mousemove(function(e){
    mouseX = e.pageX;
    mouseY = e.pageY;
});

frameRate =  30;
timeInterval = Math.round( 1000 / frameRate );

atime = setInterval(function(){ 
    w = $('#theFloater').width() / 2;
    $('#theFloater').css('left', mouseX - w).css('top', mouseY - 35);
}, timeInterval);

This works well, except when the cursor exits the thumbnail, sometimes, the image animates opacity up and down several times in a row, usually twice or three times. If I don’t show the floater div, it works perfectly. For some reason, the floater div has something to do with the oddity.

Anyone have any idea why the floater div causes the thumbnail to animate multiple times?

Answer 1

The only way I was able to get it to animate multiple times was by moving my mouse on and then off and then back on several times very fast and then stopping – the animations kept going the number of times I had made the switch (an accurate effect).

I believe what you’re looking for is jQuery’s stop() function which stops the current animations (so they don’t keep building up in numbers – each new animation call stops the previous animations before running).

In short, swap the $('#reelList li').hover function with this jQuery

$('#reelList li').hover(function(){
    $(this).find('img').stop().animate({opacity: 1.0}, 200, function(){});
    $('#theFloater').html(theTitles[$(this).index()]);
    $('#theFloater').show();
}, function(){
    $(this).find('img').stop().animate({opacity: 0.6}, 200, function(){});     
    $('#theFloater').hide();                            
});

Some more info on stop() over at the jquery.com api reference section.