jQuery镇张缩小动画
Posted zhouheiwa
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery镇张缩小动画相关的知识，希望对你有一定的参考价值。
可用于标题的制作如：
<style>
*{
margin: 0;
padding: 0;
}
#zhuda{
margin: 50px auto ;
width: 500px;
background-color: #1B1B1B;
border: 2px #1B1B1B ;
}
#zhuda ul li {
list-style: none;
}
#zhuda ul li div {
display: none;
height: 500px;
background-color:#0075b0;
}
p{
margin-top: 2px;
width: 500px;
height:50px;
background-color:#f9f9f9;
border:2px #ac2925;
}
</style>
<script src="jequery2.js"></script>
</head>
<body style="background-color:#333333">
<div id="zhuda" >
<ul id="ul">
<li>
<p class="p1"> </p>
<div id="zhuda_div1" class="heiwa"></div>
</li>
<li>
<p class="p2"> </p>
<div id="zhuda_div2" class="heiwa"></div>
</li>
<li>
<p class="p3"> </p>
<div id="zhuda_di3" class="heiwa"></div>
</li>
</ul>
</div>
<script>
$(‘.p1‘).click(function(){
$("#zhuda_di3").slideUp();
$("#zhuda_div2").slideUp();
$("#zhuda_div1").slideToggle();
});
$(‘.p2‘).click(function(){
$("#zhuda_di3").slideUp();
$("#zhuda_div1").slideUp();
$("#zhuda_div2").slideToggle();
});
$(‘.p3‘).click(function(){
$("#zhuda_div1").slideUp();
$("#zhuda_div2").slideUp();
$("#zhuda_di3").slideToggle();
});
</script>
参数解释：
slideUp() //表示收回目标
slideDown() //表示伸展目标
slideToggle(); //会记录你点的次数点击第一次伸展目标 点击第二次收回目标
以上是关于jQuery镇张缩小动画的主要内容，如果未能解决你的问题，请参考以下文章