Question

jquery动画高手请进

<script type="text/javascript">
$(document).ready(function(){

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

$(".destroy").stop(true).animate({'margin-top':'40px','opacity':'1'},400);

});

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

$(".destroy").stop(true).animate({'margin-top':'-292px','opacity':'0'},400);

});

});
</script>

<div id="Header"><a class="action" href="javascript:void(0);">打开</a></div>

<div class="destroy">
<div class="sheet">
<a class="close" title="关闭" href="javascript:void(0);">guanbi</a>
</div>
</div><!--sheet end-->
怎样把打开和关闭两个按钮合成一个 就是点击打开按钮 同时又能点击关闭

Answer 1

<style type="text/css">
*{margin:0;padding:0;}
#header{width:100%;height:100px;background:#cccccc;text-align:center;font-size:14px;line-height:100px;}
.destroy{width:100%;height:500px;background:#900;color:#ffffff;}
.destroy p{padding:10px;font:12px/30px 微软雅黑;}
</style>
<script type="text/javascript" src="jauery/js/jq.js"></script>
<script type="text/javascript">
$(function(){
	$(".action").toggle(function(){
		$(".destroy").stop(true,true).animate({height:"105px"});
		$(this).html("打开（Open）");
	},function(){
		$(".destroy").stop(true,true).animate({height:"500px"});
		$(this).html("关闭（Close）");
	});
})
</script>
<div id="header"><a class="action" href="javascript:;" target="_self">关闭（Close）</a></div>
<div class="destroy">
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</div>

Answer 2

一个按钮 .btn
事件：click
两种思路：1 更具你控制的运动对象判断 if($(".destroy").is(":visible")){ 显示状态……}else{隐藏状态……}

：2 人工加属性action，初始为open，第一次动作为显示，设置.btn的action为close，第二次点的时候判断一下action。然后做对应操作。

Answer 3

$(document).ready(function(){
        
    $(".action").click(function(){           
        $(".destroy").slideToggle();;
        
    });
   
    
});

<div id="Header"><a class="action" href="javascript:void(0);">打开</a></div>

<div class="destroy">
    <div class="sheet">
        <a class="close" title="关闭" href="javascript:void(0);">guanbi</a>
    </div>
</div><!--sheet end-->