Question

我想使用jquery来淡化div，但它不起作用。如果我将可见性设置为隐藏的'fout'（那就是我要淡化的元素），那么它不会显示任何内容，尽管消息仍然存在，因为我可以看到滚动条移动。知道为什么他们没有消失吗？

再次，我希望'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>

我对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

这是因为fadeIn()适用于属性display而非visibility。然后你可能需要设置你的div：

显示：无

然后，如果您有这行代码，请注意：

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

更改它只是为了使FadeIn工作：

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

选中此http://jsfiddle.net/hGu4E

Fadein div与jquery

1 个答案: