JQuery中的动画（ppt）

<!DOCTYPE html>
<html>
  <head>
    <title>test1.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#aa").click(function(){
                //显示
                //show()
                //$("#pic").show(3000);
                
                //fadeIn()
                //$("#pic").fadeIn();
                
                //slideDown()
                //$("#pic").slideDown();
            });
            $("#bb").click(function(){
                //隐藏
                //hide
                //$("#pic").hide(3000);
                
                //fadeOut()
                //$("#pic").fadeOut();
                
                //slideUp
                //$("#pic").slideUp();
            });
            
            $("#cc").click(function(){
                $("#pic").toggle();
            });
            
        });
    </script>
  </head>
  
  <body>
    <button id="aa">show</button>
    <button id="bb">hide</button>
    <button id="cc">toggle</button><br>
    <img src="../images/6.jpg" name="picture" id="pic" style="display:none">
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>test2.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#aa").click(function(){
                $("#pic").animate({left:"+=300px"},3000)
                         .animate({top:"+=300px",height:"500px"},3000,function(){
                    $(this).css({opacity:"0.5"});
                });
            });
            $("#bb").click(function(){
                //$("#pic").stop();     //暂停当前的，执行下一个动画
                //$("#pic").stop(true);  //清除队列
                //$("#pic").stop(true,true);//直接到达目前动画的末状态
                $("#pic").stop(false,true);
            });
        });
        
    </script>
  </head>
  
  <body>
    <button id="aa">go</button>
    <button id="bb">out</button><br>
    <img src="../images/6.jpg" name="picture" id="pic" style="position: absolute;">
  </body>
</html>