<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.rotate.js"></script>
<script>
$(function(){
$("#di").click(function(){
$(this).animate({
rotate:"95deg"
},function(){
$(this).fadeOut()
.hide();
});
});
$("#di1").click(function(){
$("#di").animate({
rotate:"0deg"
},function(){
$(this).fadeIn()
.show();
})//让div旋转回来但是好像这个没有效果。
})
});
</script>
<style>
.box{ position:relative;
width:900px;
height:900px;}
di{
width: 600px;
height: 600px;
background: #000;
position: absolute;
transform:;
left: 1px;
top: 1px;
}
di1{ width:100px;
height:100px;
background:#F00; }
</style>
</head>
<body>
<div class="box">
<div id="di">
</div>
<div id="di1">
</div>
</div>
</body>
</html>
何必呢,用 css3 class 去设置
transform
属性吧,这样效果好点比如JS