Question

I have six menu options in my webapp, and when the user hovers over a link (ul>li>a) I switch an image to show a context relevant photo, and I fade the image in and out. However, I noticed that when a user moved their mouse quickly between links, the queue didn’t process properly and the user would often be hovering over a link and have an old image displayed from the previous hover. After a bit of reading, it appeared the right thing to do was to use the stop() method, but when I try and implement it, ie6 reports a stack overflow.

Here’s my old code (which has the old image problem):

if(webImage != 'img/template/slide_web.png') {
                        $('#slide img').fadeOut(function() {
                            $(this).load(function() {$(this).fadeIn(); });
                            $(this).attr('src','img/template/slide_web.png');
                        });

And here’s my new code (which resolves the old problem, but causes ie6 to stack overflow on the first line):

if(webImage != 'img/template/slide_web.png') {
                        $('#slide img').stop(true, true).fadeOut(function() {
                            $(this).load(function() {$(this).stop(true, true).fadeIn(); });
                            $(this).attr('src','img/template/slide_web.png');
                        });

Am I implementing the stop() method incorrectly? Or is there another way to avoid the jQuery fade queue from losing it’s place?

Answer 1

The problem is this line:

$(this).load(function() {$(this).stop(true, true).fadeIn(); });

You’re binding a new .load() handler (albeit the same function) each time you’re fading out, so you need to either bind it once, outside of this scope, or .unbind() it, like this:

$(this).unbind('load').load(function() {$(this).stop(true, true).fadeIn(); });

Without that, it’s trying to run those load handlers all at once, something it can’t handle, effectively, it’s executing .stop(true, true).fadeIn() many times in a row.