jQuery fadeIn fadeOut点击 [英] jQuery fadeIn fadeOut with click
本文介绍了jQuery fadeIn fadeOut点击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里是CSS：
body {
margin：0;
padding：0;
text-align：center;
background-color：＃f0f2df;
}
#container {
border：solid 1px＃f0f2df;
background-color：＃f0f2df;
text-align：left;
margin：auto;
width：939px;
height：570px;
top：41px;
position：relative;
}
#contact_form {
display：none;
background-image：url（../ images / bg.png）;
width：703px;
height：379px;
position：absolute;
left：236px;
bottom：34px;
}
.contact_close {
display：none;
background-image：url（../ images / close.png）;
width：17px;
height：17px;
position：absolute;
right：5px;
top：135px;
}
HTML：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< link rel =stylesheettype =text / csshref =css / main.css/>
< title> test< / title>
&< script type ='text / javascript'src ='js / click.js'>< / script>
< / head>
< body>
< div id =container>
< div class =button_contact>< / div>
< div id =contact_form>
< div class =button_close>< / div>< / div>
< / div>
< / body>
< / html>
和JavaScript
$（document）.ready（function（）{
$（button_contact）。click（function（）{
$（＃contact_form）。 fadeIn（slow）;
}）;
$（。contact_close）。 slow）;
}）;
}）;
解决方案
before button_contact
$（document）.ready（function（）{
$（。button_contact）。 （function（）{
$（＃contact_form）。fadeIn（slow）;
}）;
$（。contact_close）。 （）{
$（＃contact_form）。fadeOut（slow）;
}）;
}）;
I'm trying to make a div fadeIn when another div is clicked and fadeOut again when another div is clicked (which would be the close button) but my code doesn't work, did I forget something?
Here's the CSS:
body{
margin: 0;
padding: 0;
text-align: center;
background-color:#f0f2df;
}
#container{
border: solid 1px #f0f2df;
background-color:#f0f2df;
text-align: left;
margin: auto;
width: 939px;
height: 570px;
top:41px;
position:relative;
}
#contact_form{
display: none;
background-image:url(../images/bg.png);
width: 703px;
height: 379px;
position:absolute;
left:236px;
bottom:34px;
}
.contact_close{
display:none;
background-image:url(../images/close.png);
width:17px;
height:17px;
position:absolute;
right:5px;
top:135px;
}
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>test</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/click.js'></script>
</head>
<body>
<div id="container">
<div class="button_contact"></div>
<div id="contact_form">
<div class="button_close"></div></div>
</div>
</body>
</html>
and the JavaScript
$(document).ready(function(){
$("button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".contact_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
解决方案
you need the "." before button_contact
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".contact_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
这篇关于jQuery fadeIn fadeOut点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
