Disable hyperlinks until animation is complete/disable hyperlink on element that has been clicked until new one is clicked

Disable hyperlinks until animation is complete/disable hyperlink on element that has been clicked until new one is clicked

I have multiple pictures in divs with the class .overlay and when one is clicked the contents of 2 variables fill 2 other elements. There are 2 more things that I need to address, however.

1. I would like all of the .overlay elements to be unclickable until the animation is completed.

2. I would like the .overlay that was clicked to remain unclickable until a different .overlay is clicked.


Code:

    $('.overlay').on("click",function(){
        var text = $(this).attr("title");
            $('#category').animate({'opacity': 0}, 1000, function () {
            $(this).text(text);
            }).animate({'opacity': 1}, 1000);
        var $clicked = $(this);
            $('#description').animate({'opacity': 0}, 1000, function () {
            $(this).text($clicked.data('text'));
            }).animate({'opacity': 1}, 1000);
    });


I was given the following code by a user on Stack Overflow and tried to wrap my head around it but just couldn't (complete newb with javascript)

Code:

var mutex = false; 
$
('.overlay').on("click",function() { 
//flag to determine the last clicked overlay
 
$
(this).data('active', true); 
$
('.overlay').not(this).data('active', false); 
if (!mutex && !$(this).data('active')) 
{ mutex = true; 
/* snip */
 
//animation is complete, so allow clicking all overlay again
}).animate({'opacity': 1}, 1000, function () { mutex = false; 
});
 
} 
});
Thanks for the help!