2009-12-18 42 views
1

這是正確的方式來使2 div的褪色在一起嗎? (contact_close應盈contact_box的以用作contact_box關閉按鈕jQuery和2淡入在一次點擊

編輯:固定一些divnames

的Javascript

$(document).ready(function(){ 

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

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

});

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_box{ 
    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_box"> 
     <div class="contact_close"></div></div> 
</div> 
</body> 
</html> 
+0

如果您希望關閉按鈕和聯繫人框以完全相同的方式進行動畫製作,並且關閉按鈕標籤位於聯繫人框div內 - 爲什麼不只是淡出聯繫框(其中包含按鈕)? – micahwittman 2009-12-18 21:01:07

回答

2

是的,這很好。

有很多方法可以做很多事情,但是這並不需要非常技術性的方法。

0

我沒有徹底分析你的代碼,但似乎更合乎邏輯地將閉合框放在div中,而不是在它旁邊。

0

您可以

$('#contact_box, .contact_close').fadeIn('slow') 

這是更有效,因爲jQuery的僅啓動一個淡入淡出的操作他們兩人在同一個語句。