jq图片动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41575219/article/details/97778472

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>jq图片的动画效果</title>
       <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
       <script>
           $(function(){
               $("#button1").click(function()
               {
                   //基本显示法1
                   // $("#img1").show(1000);
                   //滑动显示法2
                   //$("#img1").slideDown(1000);
                   // 淡入法:
                   //$("#img1").fadeIn();
                   $("#img1").animate({width:"500px",opacity:"1"},5000);
               });
           $("#button2").click(function()
           {
               //基本隐藏式1
               //$("#img1").hide(1000);
               //滑动隐藏式2
                  //$("#img1").slideUp(8000);
               //淡出法:
               // $("#img1").fadeOut(2000);
               // 自定义法:
                  $("#img1").animate({width:"500px",opacity:"0.1"},5000);
           });

           });
       </script>
   </head>
   <body>
       <div align="center">
       <input type="button" value="显示" id="button1"/>
       <input type="button" value="隐藏" id="button2"/><br />
       <img src="img/长城1.jpg" id="img1" width="500px"/>
       </div>
   </body>
</html>

jquery实现动画效果