<!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(){
$("p").animate({
width:'200px',
height:'200px',
transform:'rotate(360deg)';
-webkit-transform:'rotate(360deg)';
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p style="width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s;">
</p>
</body>
</html>
如果想实现这种效果（我鼠标点“开始动画”然后p就转一圈然后fadeOut）该怎么写呢？
伊谢尔伦2017-04-17 11:06:54
js語法錯誤，取消掉錯誤以後直接用css就可以觸發css3動畫
$("button").click(function(){
$("p").css({
'width':'200px',
'height':'200px',
'transform':'rotate(360deg)',
'-webkit-transform':'rotate(360deg)'
});
});
當然了，還是不建議jquery動畫和css3動畫混用,幫你用css3寫了一個效果，你看著改一下吧
http://jsfiddle.net/Fmdrx/
伊谢尔伦2017-04-17 11:06:54
