jQ自定义动画

Original 2018-11-23 13:32:41 154
abstract:<!DOCTYPE html> <html>  <head>   <meta charset="utf-8" />   <title>自定义动画</title>   <script src=&
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>自定义动画</title>
  <script src="jquery-3.3.1.min.js"></script>
  <style type="text/css">
    button{padding:5px 5px;margin:5px 5px;}
  </style>
  <script>
$(document).ready(function(){
    $('.start').click(function(){
        function startAni(){
            $('div').animate({height:300},"slow");
            $('div').animate({width:300},"slow");
            $('div').css("background-color","blue");
            $('div').animate({height:100},"slow");
            $('div').animate({width:100},"slow");
        }
        startAni();
    });
    $('.stop').click(function(){
      $('div').stop()
    })
    $('.stopall').click(function(){
      $('div').stop(true,true)
    })
});
</script>
 </head>
 <body>
  <button class="start">开始动画</button><button class="stop">结束当前动画</button><button class="stopall">结束所有动画</button>
  <div style="width:50px;height:50px;position:absolute;left:10px;top:50px;background-color:red;"></div>
 </body>
</html>

动画队列停止当前 及全部停止的测试,学完动画之后感觉好晕啦,一点没有记住似的,看了好几遍。

Correcting teacher:灭绝师太Correction time:2018-11-23 13:42:11
Teacher's summary:没事啦,多敲几遍就好了,用两遍就熟练啦!

Release Notes

Popular Entries