jQuery fadeIn fadeOut与点击

我试图让一个div淡入当另一个div被点击和淡出另一个div被点击时（这将是关闭按钮），但我的代码不工作，我忘了一些东西？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//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>

和JavaScript

$(document).ready(function(){ 

$("button_contact").click(function() { 
    $("#contact_form").fadeIn("slow"); 
}); 

$(".contact_close").click(function() { 
     $("#contact_form").fadeOut("slow"); 
    }); 
});

来源

2009-12-18 Bruno

，你可以使用fadeToggle – AminM 2013-04-01 04:56:03

你所需要的 “” button_contact之前

$(document).ready(function(){ 
    $(".button_contact").click(function() { 
    $("#contact_form").fadeIn("slow"); 
    }); 

    $(".contact_close").click(function() { 
    $("#contact_form").fadeOut("slow"); 
    }); 
});

来源

2009-12-18 20:31:50 scunliffe

aw男人这是尴尬我甚至双重检查它！哦，谢谢你，亲切的先生。 – Bruno 2009-12-18 20:35:44

你忘了。按钮结束前...

$(".button_contact")....

应该工作

来源

2009-12-18 20:31:42 akearney

您的淡入按钮上的选择器有点偏离。您的原始代码与节点名称的button_contact的元素不匹配类的的button_contact。

尝试：

$(".button_contact").click(function() { 
    $("#contact_form").fadeIn("slow"); 
});

来源

2009-12-18 20:32:24

$（ “button_contact”）点击（函数（）{应

$(".button_contact").click(function() {

来源

2009-12-18 20:32:37 rosscj2533

试试这个：

$(document).ready(function(){ 

$(".button_contact").click(function() { 
    $("#contact_form").fadeIn("slow"); 
}); 

$(".button_close").click(function() { 
    $("#contact_form").fadeOut("slow"); 
    }); 
});

来源

2009-12-18 20:32:41

jQuery的也有。 toggle（）函数，允许您传递在单击元素时互相“切换”的多个函数。

http://api.jquery.com/toggle/一个很好的功能，因为你可以添加任意多的功能，只要你想。

$(document).ready(function(){ 
    $(".button_contact").toggle(function() { 
         $("#contact_form").fadeIn("slow"); 
         }, 
         function() { 
        $("#contact_form").fadeOut("slow"); 
        }); 
    });

来源

2010-01-23 22:26:01 Mike

我很抱歉，但如果将被点击的链接这种语法工作是对应于另一个DIV一个ajax链接？我似乎无法让它工作！

<script type="text/javascript" src="js/jquery-ajaxLink.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $(".ajaxLink").ajaxLink(); 
     $(".ajaxlink").click(function() { 
    $("#content").fadeIn("slow"); 
    }); 
}); 
    </script> 


      <ul id="mainNav"> 
    <li> <a class="ajaxLink" href="test1.htm">Who We Are </a></li> 
    <li> <a class="ajaxLink" href="test2.htm">Benefits</a></li> 
    <li> <a class="ajaxLink" href="test2.htm">Commercial Terms</a></li> 
    <li> <a class="ajaxLink" href="test3.htm">Property Types</a></li> 
    <li> <a class="ajaxLink" href="test3.htm">Commercial Info</a></li> 
      </ul> 

<div id="content"></div>

来源

2010-12-10 10:40:03 iamwhitebox

jQuery fadeIn fadeOut与点击

回答

相关问题