0

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

Community
  • 1
  • 1
denislexic
  • 10,786
  • 23
  • 84
  • 128

1 Answers1

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');
     });
Matt
  • 7,049
  • 7
  • 50
  • 77
  • Thanks Matt , I'm still getting the same problem, flickering of the div and sometimes doesn't work. Also, the reason there is a delay, is to make sure that user sees the div for more than a fraction of a second before it starts fading out. (I don't like the slow fadeOut). Thanks again. – denislexic Nov 04 '11 at 06:44
  • @denislexic I'm not sure, because im not getting anything like that. What browser are you using? You should still be able to change it fast with a delay with what i put there as well. – Matt Nov 04 '11 at 06:50