search

Home  >  Q&A  >  body text

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

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

阿神阿神2788 days ago589

reply all(3)I'll reply

  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:06:54

    js syntax error, cancel the error and directly use css to trigger css3 animation

      $("button").click(function(){
    $("p").css({
      'width':'200px',
      'height':'200px',
      'transform':'rotate(360deg)',
      '-webkit-transform':'rotate(360deg)'
    });
  });

    Of course, it is still not recommended to mix jquery animation and css3 animation. I have written an effect for you using css3. You can change it as you like
    http://jsfiddle.net/Fmdrx/

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:06:54

    1. JS syntax error
    2. jQuery’s animate method and css3 animation are two completely different things, don’t mix them
    3. Whether it is jQ's animate or css3's animation, there are too many examples online. Go look for examples first

    reply
    0
  • ringa_lee

    ringa_lee2017-04-17 11:06:54

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

    reply
    0
  • Cancelreply