jQuery中的隐藏和显示

最新推荐文章于 2023-01-08 21:05:42 发布

忙着写BUG

最新推荐文章于 2023-01-08 21:05:42 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/MincingMachine/article/details/78741112

本文介绍了一种利用jQuery库实现网页中图片显示与隐藏效果的方法。通过几个按钮触发不同的动画效果，包括淡入淡出、滑动显示/隐藏及自定义动画，展示了jQuery简化DOM操作的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/jquery-1.11.0.min.js.js" charset="UTF-8"></script>
       <style>
           #img{
               width: 50px;
               height: 50px;
           }
       </style>
   </head>
   <body>
       <img id="img" src="img/android-alarm.png" />

       <input type="button" id="btn1" value="隐藏" />
       <input type="button" id="btn2" value="显示" />

       <input type="button" id="btn3" value="滑动显示" />
       <input type="button" id="btn4" value="滑动隐藏" />

       <input type="button" id="btn5" value="淡显示" />
       <input type="button" id="btn6" value="淡隐藏" />

       <input type="button" id="btn7" value="自定义" />
   </body>
   <script type="text/javascript">
       $("#btn1").click(function(){
           $("#img").hide(2000);
       })
       $("#btn2").click(function(){
           $("#img").show(2000);
       })
       $("#btn3").click(function(){
           $("#img").slideDown(2000);
       })
       $("#btn4").click(function(){
           $("#img").slideUp(3000);
       })
       $("#btn5").click(function(){
           $("#img").fadeIn(5000);
       })
       $("#btn6").click(function(){
           $("#img").fadeOut(5000);
       })

       $("#btn7").click(function(){
           $("#img").animate({
               width: "10%",
                 height: "10%",
           },2000);
       });
   </script>
</html>