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