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

Question

    <!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）该怎么写呢？

Answer 1

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/

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

解决方案