Menu
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");
});
});
914
The jQuery fadeOut() method is used to fade out a visible element. Syntax: $(selector). fadeOut(speed,callback);
jQuery has 2 fading methods which are . fadeIn() and . fadeOut(). The fadeIn method displays the element by fading it to opaque. The fadeOut method hides the element by fading it to transparent.
jQuery fadeIn() Method The fadeIn() method gradually changes the opacity, for selected elements, from hidden to visible (fading effect).
The . fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none , so the element no longer affects the layout of the page. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.
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");
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
