JQuery基础篇之淡入淡出

喜欢ヅ旅行 2021-09-14 02:34 377阅读 0赞

**在JQuery中，想要让一个元素隐藏起来，有很多种方法，同样，让一个隐藏的元素显示，也有对应的方法，调整里面的参数，就可以实现淡入淡出**

**①显示元素：前提条件是元素已被隐藏**

**方法：$("元素").show()**

**调用此方法可以显示被隐藏的元素，括号里面可以自定义显示的时间，可以是“slow”，“fast”，也可以是毫秒数。**

<!DOCTYPE html>
    <html lang="en">
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
       <title>Title</title>
       <link rel="stylesheet" href="">
       <style>
          div{
             width: 200px;
             height:200px;
             background: #ff7112;
             display: none;
          }
       </style>
       <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
       <script>
         $(function () {
             var btn=$('button');
             btn.click(function () {
               $('div').show(1000)
             })
         })
       </script>
    </head>
    <body>
    <div></div>
    <button>Show</button>
    </body>
    </html>

与此相同的显示方式还有：$(''selector").fadeIn()   $("selector").slideUp()

**②隐藏元素**

**I.$("selector").hide()**

**II. $("selector").slideDown()**

**III. $("selector").fadeOut()**

**以上方式均可以实现元素的显示和隐藏，只要改变方法里面的时间参数，就可以实现淡入淡出**

**其实JQuery为了方便编程人员，还提供了另外几种方法，可以一键实现元素的显示与隐藏，简单点来说就是元素是显示的，点击按钮可以隐藏，反之亦可，这样就不用写两个函数了**

**①$("selector").toggle("slow")   **

**②$("selector").fadeToggle(1000)  **

**③$("selector").slideToggle("fast")    
标注：这三种方法可以让显示的元素隐藏，隐藏的元素显示，改变里面的参数值便可实现淡入淡出**

<!DOCTYPE html>
    <html lang="en">
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
       <title>Title</title>
       <link rel="stylesheet" href="">
       <style>
          div{
             width: 200px;
             height:200px;
             background: #ff7112;
             display: none;
          }
       </style>
       <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
       <script>
         $(function () {
             var btn=$('button');
             btn.click(function () {
               $('div').slideToggle("fast")   //fast可以替换成“slow”,也可以换成毫秒数
             })
         })
       </script>
    </head>
    <body>
    <div></div>
    <button>Show</button>
    </body>
    </html>