Prevent jQuery event queuing

Question

I have the following jQuery which is working beautifully:

<script>
$(document).ready(function() 
{ 
    $("#btnDropDown").click(function () {
        $("#ListboxWrapper").slideDown("fast");
        $("#<%=lstBoxCompany.ClientID%>").focus();
    });

    $("#ListboxWrapper").focusout(function () {
        $("#ListboxWrapper").slideUp("fast");
    });

});

</script>

This is except when focusing out of #ListboxWrapper by clicking on #btnDropDown. This causes the events to build up and the actions cause some strange results. I'm looking for some way to prevent all further jQuery actions after one of them has fired. The expected result is that only one of them can perform per user action and not build up as is occuring now.

Answer 1

You can use the :animated selector to queue animations only if your element is not already animated:

$("#btnDropDown").click(function() {
    $("#ListboxWrapper").not(":animated").slideDown("fast");
    $("#<%=lstBoxCompany.ClientID%>").focus();
});