求助关于JQ动画问题。

<!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>

阅读 2.6k
2 个回答

何必呢,用 css3 class 去设置 transform 属性吧,这样效果好点比如

.active{
    transform: rotate(95deg);
}

JS

$("#di").click(function(){
    $(this).addClass('active');
});
#di{
  transition:all 2s liner; 
}

再加上上面那位小伙伴的代码就OK了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏