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

0

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

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

1 answer

0

The easiest way to work around this problem is to use 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.

    
18.03.2018 / 19:54