How can I prevent a bug/glitch that occurs with multiple clicks during fade?

Vote count:

0

Yes, this question has been answered quite a few times:

jQuery disable enable click event with fade jQuery prevent multiple clicks until animation is done Disabling clicking when using .fadeOut() in jQuery jQuery - Disable Click until all chained animations are complete

And the list can probably go on and on. But I can't seem to get any of these to work with my code!

$(document).ready(function(){
$('#firstNewMap,li.linkToSecondMap').click(function(e){
    $('div#mainMap').fadeOut('slow', function(){
        $('div#secondMap').fadeIn('slow');
    });
    $("#tagWrap").collapse('hide');
    $("div#secondLinks,ul#querySecondToggle,li.bkbtn,ul#secondBuildingsDropdown").css("display","block");
    $("div#mainLinks,ul#queryMainToggle,ul#mainBuildingsDropdown").css("display","none");
});
});

HTML code where li.linkToSecondMap is located:

<div id="mainLinks">
     <li ng-repeat="x in mainLinks" class="myList {{x.id}}"><a href="{{x.link}}">{{x.name}}</a></li>
</div>

{{x.id}} is linkToSecondMap

The code is otherwise working perfectly fine. I had just recently noticed that if you click too fast, you get both of the images of the map (div#mainMap and div#secondMap) but nothing else of the other stuff that also gets swapped, but perhaps because they are not fading.

asked 44 secs ago

Christine268

18

How can I prevent a bug/glitch that occurs with multiple clicks during fade?