Bootstrap’s alert to disappear

Question

I have the following code:

<script>
$(document).ready(function(){
   $(".alertaLogin").fadeIn( 300 ).delay( 3000 ).fadeOut( 400 );
});
</script>

His goal is to make Bootstrap’s Lert disappear after a brief period. It works normally when Alert is directly in HTML, but when I put Alert inside Jquery, it doesn’t work. See:

<form method="post" id="loginForm">
   <div class="modal fade" id="modalLogin">
      <div class="modal-dialog">
         <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header bg-dark text-white">
            <h4 class="modal-title font-weight-bold"><i class="fas fa-lock"></i> ACESSO RESTRITO</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
            <div id="erroLogin"></div>
                  <div class="form-group">
                     <label for="login">Login:</label>
                     <input type="text" class="form-control" id="login" aria-describedby="emailHelp" placeholder="Coloque seu login">
                  </div>
                  <div class="form-group">
                     <label for="senha">Senha:</label>
                     <input type="password" class="form-control" id="senha" placeholder="Coloque sua senha">
                  </div>
                  <div class="form-group form-check text-right">
                     <label class="form-check-label"><small><a href="#!" style="color: blue">Esqueci a senha</a></small></label>
                  </div>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
            <button type="submit" class="btn btn-dark"><i class="fas fa-lock-open"></i> Acessar</button>
            </div>
         </div>
      </div>
   </div>
</form>
<script type="text/javascript">
       $(document).ready(function () {
             $('#loginForm').submit(function () {
                data = $('#loginForm').serialize();
                $.post("validar.php", {
                   d: data,
                },
                         function (d) {
                            console.log(d);
                            if (d == 0) {
                               $('#erroLogin').html("<div class='alert alert-danger text-left alertaLogin'><i class=\"fas fa-exclamation-triangle\"></i> Dados de acesso inválidos!</div>"); 
                            } 
                         });
                return false;
             });
       });
    </script>
    <script>
    $(document).ready(function(){
       $(".alertaLogin").fadeIn( 300 ).delay( 3000 ).fadeOut( 400 );
    });
    </script>

Answer 1

Place the property in CSS display: none in class .alertaLogin:

.alertaLogin{
   display: none;
}

Then the code that shows/hides the div after the return of AJAX and after you enter the error alert div:

if (d == 0) {
   $('#erroLogin').html("<div class='alert alert-danger text-left alertaLogin'><i class=\"fas fa-exclamation-triangle\"></i> Dados de acesso inválidos!</div>"); 
   $(".alertaLogin").fadeIn( 300 ).delay( 3000 ).fadeOut( 400 );
}

The display: none is necessary for the .fadeIn has an effect.