Fadein div с jquery

Я хочу использовать jquery для fadein div, но он не работает. Если я установил видимость для скрытия 'fout' (то есть элемент, который я хочу fadein), то он не показывает ничего, хотя сообщения все еще существуют, так как я вижу, как перемещается полоса прокрутки. Любая идея, почему они не исчезают?Fadein div с jquery

Так что снова, я хочу, чтобы «fout» div исчезал после подачи.

Код, который я имею прямо сейчас.

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 

<meta charset="utf-8"> 
<title>Form</title> 
</head> 
<script type="text/javascript" src="js/validate.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 


$(function(){ 

    // initialisatie formulier validatie. (zie http://rickharrison.github.io/validate.js) 
    var validator = new FormValidator('form', [{ 
     name: 'voornaam', 
     display: 'Voornaam',  
     rules: 'required' 
    }, { 
     name: 'achternaam', 
     display: 'achternaam', 
     rules: 'required' 
    },{ 
     name: 'telefoonnummer', 
     display: 'telefoon', 
     rules: 'required|numeric' 
    },{ 
     name: 'email', 
     display: 'email', 
     rules: 'required|valid_email' 
    }], function(errors, event) { 
     var berichten = document.getElementById('fout'); 
     $("#fout").css("display","none"); 

     $("#fout").css("display","block").fadeIn('slow'); 

     berichten.innerHTML = ''; 

     // als er fouten zijn: 
     if (errors.length > 0) { 
      for (var i = 0, l = errors.length; i < l; i++) { 
       berichten.innerHTML += errors[i].message + '<br>'; 
      } 
     // als de validatie goed gegaan is: 
     } else { 
      var voornaam = $('#voornaam').val(); 
      var achternaam = $('#achternaam').val(); 
      var telefoonnummer = $('#telefoonnummer').val(); 
      var email = $('#email').val(); 

      $.post('action.php',{action: "button", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){ 
       $('#result').html(res); 
      }); 
      $('#insert').remove(); 


      document.getElementById('goed').innerHTML = 'Verstuurd!'; 
     } 

     // voorkom ten allertijde dat het formulier daadwerkelijk ge-submit wordt! 
     event.preventDefault(); 
    }); 
}); 
</script> 
<body> 
<div id="wrap"> 
<table> 
<td> 
    <form name="form"> 
     <tr> 
     <p class="names">Voornaam:</p> <p><input type="text" name="voornaam" id="voornaam"></p> 
     </tr> 
     <tr> 
     <p class="names">Achternaam:</p> <p><input type="text" name="achternaam" id="achternaam"></p> 
     </tr> 
     <tr> 
     <p class="names">Telefoonnummer:</p> <p><input type="text" name="telefoonnummer" id="telefoonnummer"></p> 
     </tr> 
     <tr> 
     <p class="names">Emailadres:</p> <p><input type="text" name="email" id="email"></p> 
     </tr> 
     <tr> 
      <input class="knop" type="submit" name="insert" value="Opsturen" id="insert"> 
     </tr> 
    </form> 
</td> 
</table> 
<br> 
<div id="fout"></div> 
</div> 
<div id="goed"></div> 
</div> 
</body> 
</html>

Мои CSS свойства FOUT:

#fout 
{ 
    visibility:hidden; 
    margin-left:-75px; 
    display:block; 
    font-size:15px; 
    background-color:#D73033; 
    width:350px; 
    font-family:"Myriad Pro"; 
    color:#FFFFFF; 
    text-align:center; 
    border-radius:2px; 
}

источник

2014-01-14 Anonymous

Это потому, что fadeIn() работает со свойством display не с visibility. Тогда вы, возможно, потребуется установить в вашем DIV:

дисплей: нет

Тогда, если у вас есть эти строки кода worng:

$("#fout").css("display","none"); 
$("#fout").css("display","block").fadeIn('slow');

Изменить это просто сделать FadeIn работа:

$("#fout").fadeIn('slow');

Проверить это http://jsfiddle.net/hGu4E

источник

2014-01-14 14:00:22 DaniP

Я изменил его (имел двойные свойства css, это исправлено сейчас) Но теперь он просто появляется, он не исчезает. –

@Twan проверить редактирование – DaniP

Я переключил места fadein и css propertie, и это работал. Так вот так: \t \t $ ("# fout"). Css ("display", "none"); \t \t $ ("# fout"). FadeIn ('slow'). Css ("display", "block"); Но, вероятно, вы тоже работаете. –

Fadein div с jquery

ответ

Смежные вопросы