Use jQuery to click an element while triggering css :active

I have a button div:

<div id="hud-button1"> </div>

I attached a listener to it:

$('#hud-button1').click(function(){ //Do Stuff });

And it has a CSS :active rule:

#hud-button1:active { /* .. */ }

So far so good. Now i want to add the option to trigger this button by pressing a key:

window.onkeyup = function(e) {
    var key = e.keyCode ? e.keyCode : e.which;

    if (key == 87) { $('#hud-button1').click(); }
}

While this works, i want the button to show the small "animation" it plays via the :active rule.

I am aware that i could add a class and remove it quickly, but the button will be mashed quickly and a lot, so im afraid that the Timeouts would interfere and bug. Is there any clean solution to this? Thanks in advance.

Answers


Thank you for your help, i solved it exactly as proposed, a class similar to the :active selector is being attached on keydown and removed on keyup.

That way it feels very responsive and no timeouts interfere.

$( document ).keydown(function(event){
    if(event.keyCode == 81){
        $("#hud-button1").click().addClass('active');
    }
    });

    $( document ).keyup(function(event){
    if(event.keyCode == 81){
        $("#hud-button1").removeClass('active');
    }
    });
}

Need Your Help

My workplace's proxy is preventing me from using Maven

java spring maven spring-mvc proxy

I work in the public sector so my workplace controls internet access pretty strictly. I've tried configuring the settings.xml file that M2Eclipse reads to no avail. It may be simple user error in my

Why does Django generate HTTP 500 errors for static media when Debug is set to False?

django deployment debugging

I'm preparing to deploy my Django app and I noticed that when I change the "DEBUG" setting to False, all references to static files (i.e., JavaScript, CSS, etc..) result in HTTP 500 errors.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.