Attribute "display" keeps changing over and over, the idea was to change only 1 time and stop. (fadein and fadeOut with pure JS)

Asked

Viewed 40 times

1

I took this fadein and fadeOut code with pure Javascript on the internet and gave a small adapted, but I have a problem.

I have a login card appearing for the user, in case he click on the "CREATE ACCOUNT" button, the login card disappears and the account creation card appears, this is working, the problem is at the time of returning, in case the user click on the "BACK" buttonthe account creation card disappears and the login card reappears, but if I look at the Firefox "Inspect Element", I see the property display keeps changing over and over and over and over again display: block and display: none, both on the login card and on the account creation card, the idea was that the account creation card would only receive 1 time display: none (to disappear) and the login card received only 1 time display: block (to appear again), but is alternating between display: block and display: none infinitely fast. The card keeps blinking. (because it’s changing quite quickly to the property display).

<!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:

Card Login

Card Create Account:

Card Criar Conta

javascript

  • Vc has 3 setIntervals, is killing only 1 (which has the name of i), soon the other 2 will be running endlessly, because the setInterval is infinite until you kill it. This is causing serious conflict in the code.

  • It’s a little difficult to analyze your code because I can’t see the effect without the CSS files, I was confused by the need to use the setInterval, I would trade only property display and opacity (have to put more attributes for different browsers) to give effect, I did a navigation by Tabs simulated this way. Waiting if you can use https://jsfiddle.net/

  • I made an improvement in the code right when you voted. I don’t know if you saw it. The code got much better.

1 answer

1


The setInterval creates an infinite timer until you cancel it through the clearInterval. By calling them several times without due cancellation, will create a bottleneck of setIntervals running at the same time.

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

But looking at your code, I realize you’re using setInterval in excess, when could use only one:

See in the example below how it gets 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>

  • Thank you very much @dvd fixed my problem. Vlw even! Regarding to use only 1 setInterval, I didn’t post the CSS, but the cards have a display: none and display: block, then I need to disappear with a div and even disappear and then appear another div until I appear completely, I used 2 more setInterval to put the property display on each card and this does not happen abruptly, but rather happens as soon as the fade is over, so a setInterval for each.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.