jQuery fadeIn fadeOut with click
43,702
Solution 1
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");
});
});
Solution 2
jQuery also has a .toggle()
function that allows you to pass multi-functions that are toggled
between each other when the element/s are clicked.
http://api.jquery.com/toggle/ a nice function because you can add as many functions as you want.
$(document).ready(function(){
$(".button_contact").toggle(function() {
$("#contact_form").fadeIn("slow");
},
function() {
$("#contact_form").fadeOut("slow");
});
});
Solution 3
You forgot a .
before the button close:
$(".button_contact")....
Should work.
Solution 4
The selector on your fadeIn button is a bit off. Your original code matches an element with a node name of button_contact
not with a class of button_contact
.
Try:
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
Solution 5
Try this:
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".button_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
Author by
Bruno
Updated on December 12, 2020Comments
-
Bruno over 3 years
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"); }); });
-
Bruno over 14 yearsaw man that's embarassing I even double checked it! oh well thank you kind sir.