<!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();
})//让p旋转回来但是好像这个没有效果。
})
});
</script>
<style>
.box{ position:relative;
width:900px;
height:900px;}width: 600px;
height: 600px;
background: #000;
position: absolute;
transform:;
left: 1px;
top: 1px;}
height:100px;
background:#F00; }
</style>
</head>
<body>
<p class="box">
<p id="di">
</p>
<p id="di1">
</p>
</p>
</body>
</html>
高洛峰2017-04-10 17:32:33
何必呢，用 css3 class 去设置 transform 属性吧,这样效果好点比如
.active{
transform: rotate(95deg);
}JS
$("#di").click(function(){
$(this).addClass('active');
});