Question

I’ve looked at all these posts:
jQuery stop fadein during fadeout
jQuery stop "click" action after first elevent
stop the animation jQ
Cancel all queued jQuery slideUp and slideDown animations

And a lot more, but I can’t seem to make it work on my site.

Basically I have installed Jquery hotkeys to create shortcuts on my site. When the user hits the hotkey, a div should fadeIn showing the user his shortcut and then fadeOut a second later.

My issue is that I can’t seem to make it work perfectly and smoothly. For the code, please see the jsfiddle:
http://jsfiddle.net/M7j9Y/2/

(In the JS panel, please scroll down to skip the hotkeys pluggin. My code is at the very end)

If you press rapidly and alternating between “Alt+f” and +Alt+s”, you’ll see that the fade effect is acting all weird and sometimes doesn’t even work.

All help much appreciated and thank you in advance

Answer 1

Looks like you put a delay in there for some reason. not sure why. Try this instead

$('#hotkeys_display').html(text).fadeTo('fast',0.3).fadeOut('fast'); This seems to work ok for me.

You can also do something like

$('#hotkeys_display').stop().html(text).fadeTo('fast',0.3).fadeTo('slow', 0.0);

Just to slow it down a little. You can keep fadeOut, but i always like to use fadeTo, because of the css it sets.

http://jsfiddle.net/M7j9Y/8/ this will fade out and set the display to none. That way it completely disappears, but you would be able to go back and forth quickly without seeing any flickering.

    $('#hotkeys_display').stop(true).html(text).fadeTo('fast',0.3)
        .fadeTo('slow', 0.0, function(){
            $(this).css('display','none');
     });