- css3和jquery的animate在一起怎么没有想要的效果呢?
阿神
阿神 2017-04-17 11:04:54
0
3
581
    <!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)该怎么写呢?

阿神
阿神

闭关修行中......

全部回覆(3)
伊谢尔伦

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/

伊谢尔伦
  1. JS語法錯誤
  2. jQuery的animate方法和css3 animation完全是兩個不一樣的東西,不要混用
  3. 無論是jQ的animate還是css3的animation網上例子都太多了先去找例子看
左手右手慢动作

http://www.cnblogs.com/WitNesS/p/4643019.html

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板