Fadein div与jQuery

Question

I want to use jquery to fadein a div, but it's not working. 我想使用jquery淡入div，但无法正常工作。 If I set the visibility to hidden of 'fout' (thats the element I want to fadein) then it doesn't show aything, although the messages are still there, since I can see the scrollbar moving. 如果我将可见性设置为“ fout”（即我要淡入的元素）的隐藏位置，则尽管消息仍然存在，但它仍不显示任何内容，因为我可以看到滚动条在移动。 Any idea why they are not fading in? 知道为什么他们不消失吗？

So again, I want the 'fout' div to fadein after submit. 再说一遍，我希望'fout'div在提交后淡入。

The code I have right now. 我现在拥有的代码。

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

My css properties of fout: 我的fout的CSS属性：

#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;
}

Answer 1

That's because fadeIn() works with the property display not with visibility . 这是因为fadeIn()与属性display一起使用，而不与visibility 。 Then you may need to set in your div: 然后，您可能需要在div中进行设置：

display:none 显示：无

Then if you have this lines of code are worng: 然后，如果您有以下代码行：

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

Change it just to make the FadeIn work : 更改它只是为了使FadeIn起作用：

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

Check this http://jsfiddle.net/hGu4E 检查此http://jsfiddle.net/hGu4E

Fadein div与jQuery

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-01-14 14:00:22

Fadein div与jQuery

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-01-14 14:00:22

解决方案1
1 已采纳 2014-01-14 14:00:22