css3和jquery的animate在一起怎么没有想要的效果呢？

发布于
2014-04-14

    <!DOCTYPE html>
<html>
<head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>




<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      width:'200px',
      height:'200px',
      transform:'rotate(360deg)';
      -webkit-transform:'rotate(360deg)';
    });
  });
});
</script>


</head>

<body>

<button>开始动画</button>


<div style="width:100px;
    height:100px;
    background:yellow;
    transition:width 2s, height 2s;
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s;">
</div>



</body>
</html>

如果想实现这种效果（我鼠标点“开始动画”然后div就转一圈然后fadeOut）该怎么写呢？

segmentfault css3 jquery

阅读 13.4k

3 个回答

fishenal

✓ 已被采纳

js语法错误，取消掉错误以后直接用css就可以触发css3动画

  $("button").click(function(){
    $("div").css({
      'width':'200px',
      'height':'200px',
      'transform':'rotate(360deg)',
      '-webkit-transform':'rotate(360deg)'
    });
  });

当然了，还是不建议jquery动画和css3动画混用,帮你用css3写了一个效果，你看着改一下吧
http://jsfiddle.net/Fmdrx/