Attribute "display" is changing without stopping, the idea was to change only once and stop. (fadeIn and fadeOut with pure JS)

Navigation
1

I got this code from fadeIn and fadeOut with pure Javascript on the internet and gave a little adapted, but I have a problem.

I have a login card appearing to the user, if he clicks the "CREATE ACCOUNT" button, the login card disappears and the account creation card appears, this is working, the problem is when it comes back, if the user clicks the "BACK" button, the account creation card disappears and the login card reappears, but if I look at the "Inspect Element" of Firefox, I see that the display property keeps changing without stopping, alternating between display: block and display: none , both in the login card and in the account creation card, the idea was that the account creation card only received display: none (to disappear) and the login only received display: block (to reappear), but is alternating between display: block and display: none infinitely fast. The card flashes. (because it is fast switching the display property). 

<!DOCTYPE html>
<html>
<head>
    <title>Cinema</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
    <script type="text/javascript">
        function fadeOut(id, time) {
            fade(id, time, 100, 0, 0);
        }

        function fadeIn(id, time) {
            fade(id, time, 0, 100, 1);
        }

        function fade(id, time, ini, fin, inout) {
            timer = (time * 1000) / 50;
            if(inout == 1)
            {
                setInterval(function(){ document.getElementById(id).style.display = "block"; }, timer);
            }
            var target = document.getElementById(id);
            var alpha = ini;
            var inc;
            if (fin >= ini) { 
                inc = 2; 
            } else {
                inc = -2;
            }
            var i = setInterval(
                function() {
                    if ((inc > 0 && alpha >= fin) || (inc < 0 && alpha <= fin)) {
                        clearInterval(i);
                    }
                    setAlpha(target, alpha);
                    alpha += inc;
                }, timer);
            if(inout == 0)
            {
                setInterval(function(){ document.getElementById(id).style.display = "none"; }, timer);
            }   
        }

        function setAlpha(target, alpha) {
            target.style.filter = "alpha(opacity="+ alpha +")";
            target.style.opacity = alpha/100;
        }
    </script>
</head>
<body style="background-color: rgb(238, 238, 238);">
    <div class="cardLogin" id="cardLogin">
        <div class="tituloCardLogin">
            <span><i class="mdi mdi-movie mdi-48px"></i></span>
        </div>
        <div class="inputCardLogin" id="inputCardLogin">
            <input type="text" name="username" placeholder="Username">
            <br><br><br>
            <input type="text" name="password" placeholder="Password">
        </div>
        <div class="btnCardLogin">
            <button type="button">LOGIN</button><br>
            <button type="button" onclick="irCriarConta()">CRIAR CONTA</button>
        </div>
    </div>

    <div class="cardCriarConta" id="cardCriarConta">
        <div class="tituloCardCriarConta">
            <span><i class="mdi mdi-movie mdi-48px"></i></span>
        </div>
        <div class="inputCardCriarConta" id="inputCriarConta">
            <input type="text" name="username" placeholder="Username">
            <br><br><br>
            <input type="text" name="password" placeholder="Password">
            <br><br><br>
            <input type="text" name="password2" placeholder="Confirm Password">
        </div>
        <div class="btnCardCriarConta">
            <button type="button" onclick="voltarLogin()">VOLTAR</button><br>
            <button type="button">SALVAR</button>
        </div>
    </div>

</body>
<script type="text/javascript">
    function irCriarConta() {
        fadeOut("cardLogin", 1.2);
        fadeIn("cardCriarConta", 1.2);
    }

    function voltarLogin() {
        fadeIn("cardLogin", 3);
        fadeOut("cardCriarConta", 3);
    }
</script>
</html>

Card Login:

CardCreateAccount:

    
asked by anonymous 12.02.2018 / 22:58

1 answer

1

setInterval creates an infinite timer until you cancel it with clearInterval . By calling them multiple times without due cancellation, you will create a setIntervals botton running at the same time.

To solve this, you would have to give each one a name and use clearInterval at the end of the process to cancel each one.

But by analyzing your code, I noticed that you're using% overcoverage, when you could only use one:

See in the example below how to get simpler using only 1 setInterval : 

function fadeOut(id, time) {
   fade(id, time, 100, 0, 0);
}

function fadeIn(id, time) {
   fade(id, time, 0, 100, 1);
}

function fade(id, time, ini, fin, inout) {
   timer = (time * 1000) / 50;
   var target = document.getElementById(id);
   var alpha = ini;
   var inc = fin >= ini ? 2 : -2;
   var i = setInterval(
       function() {
           target.style.display = inout == 1 ? "block" : "none";
           if ((inc > 0 && alpha >= fin) || (inc < 0 && alpha <= fin)) {
               clearInterval(i);
           }
           setAlpha(target, alpha);
           alpha += inc;
       }, timer);
}

function setAlpha(target, alpha) {
   target.style.filter = "alpha(opacity="+ alpha +")";
   target.style.opacity = alpha/100;
}

function irCriarConta() {
        fadeOut("cardLogin", 1.2);
        fadeIn("cardCriarConta", 1.2);
    }

    function voltarLogin() {

        fadeIn("cardLogin", 3);
        fadeOut("cardCriarConta", 3);
    }
#cardCriarConta{
   display: none;
}
<div class="cardLogin" id="cardLogin">
        <div class="tituloCardLogin">
            <span><i class="mdi mdi-movie mdi-48px"></i></span>
        </div>
        <div class="inputCardLogin" id="inputCardLogin">
            <input type="text" name="username" placeholder="Username">
            <br><br><br>
            <input type="text" name="password" placeholder="Password">
        </div>
        <div class="btnCardLogin">
            <button type="button">LOGIN</button><br>
            <button type="button" onclick="irCriarConta()">CRIAR CONTA</button>
        </div>
    </div>

    <div class="cardCriarConta" id="cardCriarConta">
        <div class="tituloCardCriarConta">
            <span><i class="mdi mdi-movie mdi-48px"></i></span>
        </div>
        <div class="inputCardCriarConta" id="inputCriarConta">
            <input type="text" name="username" placeholder="Username">
            <br><br><br>
            <input type="text" name="password" placeholder="Password">
            <br><br><br>
            <input type="text" name="password2" placeholder="Confirm Password">
        </div>
        <div class="btnCardCriarConta">
            <button type="button" onclick="voltarLogin()">VOLTAR</button><br>
            <button type="button">SALVAR</button>
        </div>
    </div>
    
12.02.2018 / 23:36
How do I make a date filter load the data (at runtime) according to what the user is typing? Heroku login error in Windows cmd