Mouseleave does not work with .each and delay?

Question

I have written some code to change the colour of each letter inside an a tag and show a pop up when you hover the link.

The mouseenter function works fine but when you hover off the link I would like to do the reverse of the original change ( so change back to the origional colour ).

I take the delay out of the leave function it works but the effect is not as nice. I am confused as to why this works on the enter but not on the leave?

Another thing to mention is when it does change colour back to the grey the mouseenter function does not work again, which is kind of annoying.

Here is a link to the site so you can see what I am talking about and the link is the one at the bottom that says "Touch Marketing"

http://dev.touch-akl.com/colin/

Any help please?

My jQuery looks like this

$('#copyright a').mouseenter(function(){

    var $letters = $(this).find('span'),
    $sayhi = $(this).find('img'),
    delay = 0;

    $sayhi.animate({top:-30, 'opacity':1}, 500, "easeInOutExpo");

    $letters.each(function(){

        $(this).delay(delay).queue(function(){
            $(this).css({'color':'#333'});
        });

        delay+=35;      

    }); // end each

}).mouseleave(function(){

    var $letters = $(this).find('span'),
    delay = 0;

    $letters.each(function(){

        $(this).delay(delay).queue(function(){
            $(this).css({'color':'#333'});
        }); 

        delay+=35;      

    });

}); // end leave

score 1 · Accepted Answer · answered Mar 06 '13 at 00:36

jQuery .queue() is complicated to use correctly so unless you need to interact with other things in the jQuery animation queue, it is often much, much simpler to just use setTimeout() like this. You also should make delay a local variable so it isn't an implicit global variable.

}).mouseleave(function(){
    var delay = 0;
    $(this).find('span').each(function(){
        var item = $(this);

        setTimeout(function(){
            item.css({'color':'#333'});
        }, delay); 

        delay+=35;      
    });
}); // end leave

Thanks I have had trouble with .queue() before the setTimeout() method works much better! — Chris G-Jones, Mar 06 '13 at 01:04

score -2 · Answer 2 · answered Mar 06 '13 at 00:36

-2

Most likely the problem is with the closure created by your functions in mouseenter and mouseleave. They're both referencing the same delay variable. You might want to separate them:

delayEnter = 0;
delayLeave = 0;

answered Mar 06 '13 at 00:36

Amy

7,388
2
20
31

It's bad form to be using a global variable for `delay`, but the reference to `delay` in the OP's code is not delayed itself so I don't see how this is going to fix the problem. `delay` itself isn't referenced in a time-delayed fashion at all. – jfriend00 Mar 06 '13 at 00:37
No assumptions made for the variable to be global. I simply suggest not referencing the same variable for both mouse events. – Amy Mar 06 '13 at 00:42
But that doesn't fix the problem. – jfriend00 Mar 06 '13 at 00:50

Mouseleave does not work with .each and delay?

2 Answers2