<!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)该怎么写呢?
js語法錯誤,取消掉錯誤以後直接用css就可以觸發css3動畫
當然了,還是不建議jquery動畫和css3動畫混用,幫你用css3寫了一個效果,你看著改一下吧
http://jsfiddle.net/Fmdrx/
http://www.cnblogs.com/WitNesS/p/4643019.html