.click показать предупреждение от json

Question

У меня есть кнопка и текстовое поле, которое считывает идентификатор для определенного пользователя в моем json-файле. Если пользователь вводит 001, их имя будет отображаться в предупреждении, предупреждение будет скрыто при загрузке страницы, но когда пользователь вводит эту информацию, появится предупреждение - приветствие (имя пользователя и данные из файла json)

Этот скрипт работает, однако, когда я жду несколько секунд, он исчезает, как я могу заставить его оставаться на странице, когда он появляется?

$(document).ready(function() { 
//Hide alert when page loads 
$("#loginalert").hide();  
$("#loginbtn").click(function(event){ 
//console.log("clicked login"); 
    $.getJSON('result.json', function(jd) { 
     var id = $('#userName').val(); 
     //console.log(id); 
     for (var i=0; i<jd.user.length; i++) { 
     if (jd.user[i].ID == id) { 
      $('#loginalert').html('<p> Welcome: ' + jd.user[i].name + '</p>');  
      //show the alert after loading the information 
      $("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000).fadeOut('slow', function() { 
      $('#contact').fadeIn('slow'); 
     }); 
     } 
     } 
    }); 
}); }); 

также есть ли способ добавить как слайд вниз или слайд-анимацию при появлении окна предупреждения? коробка

Alert:

<div class="alert alert-success" id="loginalert"> <strong>Welcome!</strong></div> 

поле Логин, который требует от пользователя ввести свой ID:

div class="alert alert-info"> 
<input type="text" id="userName" value> <button type="button" id="loginbtn" class="btn btn-primary btn-md">Login</button></div> 

это сейчас работает, если я забрать замирание из

Есть ли способ отображения сообщения

<div class="alert alert-danger"> 
<strong>Danger!</strong> Indicates a dangerous or potentially negativeaction.</div> 

, если пользователь вводит неверный идентификатор или ничего не вводит?

большое спасибо

Answer 1

Удалите fadeOut() часть. Этот код отвечает за его скрытие.

Answer 2

$(function() { 
    //Hide alert when page loads 
    var alertBox=$("#loginalert"); 
    alertBox.hide();  
    $("#loginbtn").on('click',function(e){ 
     // console.log("clicked login"); 
     e.preventDefault(); 
     $.getJSON('result.json', function(jd) { 
      var id = $('#userName').val(); 
      // console.log(id); 
      for (var i=0; i<jd.user.length; i++) { 
       if (jd.user[i].ID == id) { 
        // show the alert if d.user[i].ID is idafter 
        var message= "<p> Welcome: ' + jd.user[i].name + '</p>'"; 
        alertBox.html(message).fadeIn('slow',function(){ 
         $('#contact').fadeIn('slow') 
        }) 
       } else { 
        // show the alert if d.user[i].ID is not idafter 
        var message= "<p> Error </p>'"; 
        alertBox.html(message).fadeIn('slow') 
       } 
      } 
     }) 
    }) 
});