What is the error of this code? the animation should only work once

Question

I have several elements with the class. track, when anyone is clicked the div #Controls appears with this animation, but I need it to occur only once. I tried several ways from the internet but could not, one that came closer did not repeat when clicking on the same element with the class, but clicking on another element that repeats. Here:

       $(document).ready(
function(){
    $(".track").one("click", function () {
        $("#controls").fadeIn()
        .css({bottom:-50,position:'absolute'})
        .animate({bottom:0}, 500, function() {
        });
    });
});

Answer 1

The easiest way to solve this problem is by using a global variable, indicating whether you have already performed the animation or not. In this example:

var animado = false;
$(document).ready(
function(){
    $(".track").one("click", function () {
        if (animado) {
            return
        }
        animado = true;        
        $("#controls").fadeIn()
        .css({bottom:-50,position:'absolute'})
        .animate({bottom:0}, 500, function() {});
    });
});

So it will only run the animation the first time.