jquery images flickering

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?

I've never seen jsfiddle before...I'll have to check that out, but in the mean time, here's the link: http://ggfilmz.com/foo/x/index.html — pizzafilms, Aug 28 '12 at 02:20

score 2 · Accepted Answer · answered Aug 28 '12 at 03:30

2

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.

answered Aug 28 '12 at 03:30

DACrosby

11,116
3
39
51

+1 You could also chain `$('#theFloater').html(theTitles[$(this).index()]).show();`. In fact, `var $this = $(this);` and even `$img = $this.find('img');` used throughout would improve speed and minimisation, too :) – Nick Aug 28 '12 at 03:34
Thanks so much, but stop() didn't correct it. (you can see it updated on the site) The most predictable way to make it show the problem is to move the cursor in and out of the middle thumbnail very quickly, not even multiple times. – pizzafilms Aug 28 '12 at 03:46
I'm looking at your JS (http://ggfilmz.com/foo/x/rplayer.js) and it looks like `stop()` isn't in your code at all? Maybe you re-updated it? – DACrosby Aug 28 '12 at 07:15
Well, it looks like I had some internet connection problems. After I made sure the .stop() code was uploaded, it looks like it worked after all. Thank you so much! – pizzafilms Aug 28 '12 at 14:11

jquery images flickering

1 Answers1