gpt4 book ai didi

javascript - 使用 jquery 淡化 div

转载 作者:太空宇宙 更新时间:2023-11-04 14:05:56 28 4
gpt4 key购买 nike

我想使用 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;
}

最佳答案

那是因为fadeIn()使用属性 display 而不是 visibility。然后你可能需要在你的 div 中设置:

display:none

然后如果你有这行代码是 worng:

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

改变它只是为了使淡入工作:

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

检查这个http://jsfiddle.net/hGu4E

关于javascript - 使用 jquery 淡化 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21115371/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com