一、隐藏/显示

1.hide() / show() - 隐藏/显示 HTML 元素

2.toggle() - 自动切换 hide() 和 show() 方法，如果元素是可见的，切换为隐藏的；如果元素是隐藏的，则切换为可见的。

以上三个方法都有两个可选参数：

第一个参数：speed，规定隐藏/显示的速度，可取“slow”，“fast”或者直接精确到毫秒

第二个参数：callbcak，在进行“隐藏”或“显示”操作后所执行的函数

<button id="hide">隐藏</button>
<p>显示与消失</p>
<script>
//点击按钮文本的显示与消失
$(document).ready(function(){
    $("button").click(function(){
    $("p").hide();
    })
})
</script>

<script>
    $(document).ready(function () {
        $("#hide").click(function () {
            $("p").toggle();
        })
    })
</script>

注意：

display:none和visible:hidden都能把网页上某个元素隐藏起来，在视觉效果上没有区别，但是在一些DOM操作中两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，即它仍然具有高度、宽度等属性，通俗来说就是看不见但摸得到。

二、淡入与淡出

  1. fadeIn()：用于淡入已隐藏元素
  2. fadeOut()：用于淡出可见元素
  3. fadeToggle()：在fadeIn()fadeOut()方法之间进行切换
  4. fadeTo()：允许渐变为给定的不透明度(0~1)之间

前三个方法都有两个可选参数，

第一个参数：speed，规定淡入/淡出的速度，可取“slow”，“fast”或者直接精确到毫秒

第二个参数：callbcak，在进行“淡入”或“淡出”操作后所执行的函数

fadeTo()有三个参数

第一个参数：speed必选，规定效果的速度，可取“slow”，“fast”或者直接精确到毫秒

第二个参数：opacity，允许渐变为给定的不透明度(0~1)之间，设置不透明度之后元素将无法完全从页面消失 留下的颜色深浅与不透明度有关。

第三个参数：callbcak可选，在进行操作后所执行的函数

<button>淡入淡出</button>
<div id="div1" style="width: 80px; height: 80px; background-color: red;"></div>
<div id="div2" style="width: 80px; height: 80px; background-color: green;"></div>
<div id="div3" style="width: 80px; height: 80px; background-color: yellow ;"></div>

<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("#div1").fadeToggle("fast");
            $("#div2").fadeToggle("slow");
            $("#div3").fadeToggle(3000);
        })

    })
</script>

三、滑动

slideDown()向下滑动

slideUp()向上滑动

alideToggle()上下滑动切换， 在 slideDown() 与 slideUp() 方法之间进行切换。

以上三个方法都有两个可选参数：

第一个参数：speed，规定滑动的速度，可取“slow”，“fast”或者直接精确到毫秒

第二个参数：callbcak，在进行“滑动”操作后所执行的函数

<div class="hide">
    <p>123</p>
    <p>123</p>
    <p>123</p>
</div>
<p class="show">点击</p>

<script>
  $(document).ready(function () {
      $(".show").click(function () {
          $(".hide").slideToggle();
      })
  })
</script>