jquery: cancel fadeto then fadein

Question

I've a div that is initially displayed and then fades out slowly (with fadeto) over 10 seconds when the mouse leaves the div. When the mouse reenters, I need to cancel the fadeto (if it is still in progress) and fade the div back in.

I know (think) .stop() is my savior here. It stops the div fadeTo correctly but for the life of me I can't get fadeIn to kick in.

Here is what I have:

$(document).on('mouseenter', '#player', function(){
        $(this).stop().fadeIn('fast');
    });

    $(document).on('mouseleave', '#player', function(){
        $(this).stop().fadeTo(10000,0.2);
    });

http://jsfiddle.net/FraserHart/SMQ4M/

Answer 1

I worked it out.

I need to fade back in with fadeTo rather than fadeIn as when fading out with fadeTo, it only adjusts the opacity so still treats it as visible:

$(document).on('mouseenter', '#player', function(){
        $(this).stop().fadeTo('fast',1);
    });

    $(document).on('mouseleave', '#player', function(){
        $(this).stop().fadeTo(10000,0.2);
    });