單擊 jQuery 淡入淡出淡出
[英]jQuery fadeIn fadeOut with click
問題描述
我試圖在單擊另一個 div 時使 div 淡入淡出，並在單擊另一個 div 時再次淡出淡入淡出（這將是關閉按鈕）但我的代碼不起作用，我忘記了什么嗎？
這是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");
});
});
7 個解決方案
解決方案1
11 已采納 2009-12-18 20:31:50
你需要“。” 在 button_contact 之前
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".contact_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
解決方案2
9 2010-01-23 22:26:01
jQuery 也有一個.toggle()函數，它允許你傳遞多個在元素被點擊時相互toggled的函數。
http://api.jquery.com/toggle/一個不錯的功能，因為您可以添加任意數量的功能。
$(document).ready(function(){
$(".button_contact").toggle(function() {
$("#contact_form").fadeIn("slow");
},
function() {
$("#contact_form").fadeOut("slow");
});
});
解決方案3
2 2009-12-18 20:31:42
你忘記了一個. 在按鈕關閉之前：
$(".button_contact")....
應該工作。
解決方案4
1 2009-12-18 20:32:24
淡入按鈕上的選擇器有點偏離。 您的原始代碼與節點名稱為button_contact而不是與button_contact類匹配的元素。
嘗試：
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
解決方案5
1 2009-12-18 20:32:37
$("button_contact").click(function() { 應該是
$(".button_contact").click(function() {
解決方案6
1 2009-12-18 20:32:41
試試這個：
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_form").fadeIn("slow");
});
$(".button_close").click(function() {
$("#contact_form").fadeOut("slow");
});
});
解決方案7
0 2010-12-10 10:40:03
抱歉，如果單擊的鏈接是對應於另一個 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>
jQuery中單擊時出現.fadeIn和.fadeOut的問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.