当点击另一个div时,我试图制作一个div fadeIn,当点击另一个div时再次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> …所以我试图弄清楚如何在jquery上的动画后显示一个不可见的div.这是显示div的代码:
$('#box_green')
.css({
visibility: "visible",
opacity: 0
})
.fadeIn('slow')
;
css也使div不可见:
div#box_green{
background-image:url(../images/bg_stripe_green.png);
background-repeat:repeat;
width: 478px;
height:300px;
position:absolute;
top:249px;
z-index:20;
visibility:hidden;
}
并点击动画:
$(document).ready(function(){
$("#menu_h, #menu_p, #menu_q, #menu_b, #menu_c").one('click', function(){
$("#menu_h").animate({"left": "+=419px"}, "slow");
$("#menu_p").animate({"left": "+=313px"}, "slow");
$("#menu_q").animate({"left": "+=210px"}, "slow");
$("#menu_b").animate({"left": "+=104px"}, "slow");
$("#menu_c").animate({"left": "+=0px"}, "slow");
$("#menu_h, #menu_p, #menu_q, #menu_b, #menu_c").unbind('click');
});
});
如何在#menu_h动画完成后将box_green div显示出来？并且假设我还有一个隐藏的#box_yellowdiv,在再次淡出box_green之后我怎么能让它可见(与box_green div具有相同的效果)(让它再次看不见).我实际上有5个div(box_green和box_yellow是其中2个)需要"转动当前显示div并显示div clicked"事件.
所以我有一个标志,它改变了鼠标悬停的背景,我试图有5个不同的背景,每一个都显示在鼠标悬停,而不是随机,并在第5次鼠标悬停完成后返回第一个背景.我怎样才能实现这一目标？
这是jquery脚本
$(document).ready(function(){
$("#logo").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
和css
div#logo{
background-image:url(../images/logo.png);
background-repeat:no-repeat;
width:216px;
height:235px;
position:absolute;
right:45px;
top:5px;
z-index:12;
}
div#logo_hover{
background-image:url(../images/logo_hover_blue.png);
background-repeat:no-repeat;
width:216px;
height:235px;
position:absolute;
right:45px;
top:5px;
z-index:11;
}
编辑:
我遵循了Scott M.的建议,得到了这段代码:
$("#logo").click(function () {
var color = $(this).css("background-image", "background" + bgnum + ".png");
});
它可能遗漏了一些东西......
但问题是我不知道如何添加其他div(logo1,logo2,logo3和logo4)与他们各自的图像,然后保持隐形,直到他们转动鼠标悬停,什么是最好的方法？显示:无？