猴子也能学会的jQuery第七期——jQuery动画（上）

📚系列文章—目录🔥

猴子也能学会的jQuery第一期——什么是jQuery

猴子也能学会的jQuery第二期——引入jQuery

猴子也能学会的jQuery第三期——使用jQuery

猴子也能学会的jQuery第四期——jQuery选择器大全

猴子也能学会的jQuery第五期——jQuery样式操作

猴子也能学会的jQuery第六期——jQuery事件（上）

猴子也能学会的jQuery第六期——jQuery事件（中）

猴子也能学会的jQuery第六期——jQuery事件（下）

猴子也能学会的jQuery第七期——jQuery动画（上）

猴子也能学会的jQuery第七期——jQuery动画（下）

猴子也能学会的jQuery第八期——jQuery属性操作

猴子也能学会的jQuery第九期——jQuery内容操作

猴子也能学会的jQuery第十期——jQuery元素操作（上）

猴子也能学会的jQuery第十期——jQuery元素操作（下）

猴子也能学会的jQuery第十一期——jQuery尺寸和位置操作

猴子也能学会的jQuery第十二期——jQuery遍历（上）

猴子也能学会的jQuery第十二期——jQuery遍历（中）

猴子也能学会的jQuery第十二期——jQuery遍历（下）

猴子也能学会的jQuery——参考手册

🔥未完待续...

文章目录

📌回顾上期

上期讲了jQuery事件的内容，分为上中下三个部分

jQuery提供了一些事件操作的方法，如事件绑定、事件委托和事件解绑等等，可以方便用户在开发中进行事件处理。在触发事件时，可以获取到事件对象，通过事件对象来阻止默认事件行为，或者获取事件发生时的一些信息等。

🎯jQuery动画

在网页开发中，适当地使用动画可以使页面更加美观，进而增强用户体验。jQuery中涵盖了一系列方法用于实现动画，当这些方法不能满足实际需求时，用户还可以自定义动画（animate方法）。

🧩jQuery显示与隐藏效果
jQuery中用于控制元素显示和隐藏效果的方法如下表

方法说明
show([speed,[easing],[fn]]) 显示隐藏的匹配元素
hide([speed,[easing],[fn]]) 隐藏显示的匹配元素
toggle([speed],[easing],[ fn]) 元素显示与隐藏切换
在表中，参数speed表示动画的速度，可设置为动画时长的毫秒值（如1000），或预定的3种速度（slow、fast和normal）；参数easing表示切换效果，默认效果为swing，还可以使用linear效果；参数fn表示在动画完成时执行的函数。
下面通过代码演示show()、hide()和toggle()的简单使用。
html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>ajax studytitle>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js">script>
head>
<style>
  div {
    width: 150px;
    height: 300px;
    background-color: pink;
  }
style>
<button>显示button>
<button>隐藏button>
<button>切换button>
<div>div>
<script>
  $("button").eq(0).click(function () {
    $("div").show(1000, function () {
      alert("已显示");
    });
  });
  $("button").eq(1).click(function () {
    $("div").hide(1000, function () {
      alert("已隐藏");
    });
  });
  $("button").eq(2).click(function () {
    $("div").toggle(1000);
  });
script>
 
html>
上述代码中，设置div元素的样式宽度150px，高度300px，背景色pink。然后分别定义功能按钮和div元素，然后给页面中的第1个按钮绑定单击事件，实现单击“显示”按钮控制div元素的显示，然后给页面中的第2个按钮绑定单击事件，实现单击“隐藏”按钮控制div元素的隐藏，然后给页面中的第3个按钮绑定单击事件，实现单击“切换”按钮控制div元素的显示和隐藏。
🧩jQuery滑动效果

jQuery中用于控制元素上滑和下滑效果的方法如下表

方法说明
slideDown([speed],[easing],[ fn]) 垂直滑动显示匹配元素（向下增大、滑动）
slideUp([speed,[easing],[ fn]]) 垂直滑动显示匹配元素（向上减小、滑动）
slideToggle([speed],[easing],[ fn]) 在slideUp()和slideDown()两种效果间的切换
在表中，参数speed表示动画的速度，可设置为动画时长的毫秒值（如1000），或预定的3种速度（slow、fast和normal）；参数easing表示切换效果，默认效果为swing，还可以使用linear效果；参数fn表示在动画完成时执行的函数。

接下来通过代码演示slideUp()、slideDown()和slideToggle()方法的使用
html>
<html>
<head>
  <meta charset="utf-8">
  <title>ajax studytitle>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js">script>
head>
<style>
  #panel,
  #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
  }
 
  #panel {
    padding: 50px;
    display: none;
  }
style>
 
<body>
 
  <div id="flip">点击下滑div>
  
  
  <div id="panel">Hello world!div>
 
body>
<script>
  $(document).ready(function () {
    $("#flip").click(function () {
      $("#panel").slideDown("slow");  //jQuery slideDown() 方法用于向下滑动元素。
 
      // $("#panel").slideUp();  //jQuery slideUp() 方法用于向上滑动元素。
 
      // $("#panel").slideToggle();  
      /*jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
      如果元素向下滑动，则 slideToggle() 可向上滑动它们。
      如果元素向上滑动，则 slideToggle() 可向下滑动它们。*/
    });
  });
script>
html>
1️⃣slideDown()

2️⃣slideUp()

3️⃣slideToggle()

🧩补充：hover()方法

jQuery提供了hover()方法，可以直接代替鼠标指针移出和移入事件，语法如下：
$(selector).hover([over,]out);
在上述语法中，over表示鼠标指针移到元素上要触发的函数（相当于mouseenter），out表示鼠标指针移出元素要触发的函数（相当于mouseleave），下面通过代码来演示（两种方法实现效果）。
html>
<html>
<head>
  <meta charset="utf-8">
  <title>ajax studytitle>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js">script>
head>
<style>
  #panel,
  #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
  }
 
  #panel {
    padding: 50px;
    display: none;
  }
style>
 
<body>
 
  <div id="flip">鼠标指针移入，显示或隐藏面板。div>
  <div id="panel">Hello world!div>
 
body>
<script>
  //方法一
  $(document).ready(function () {
    $("#flip").hover(function () {
      $("#panel").slideDown("slow");
    },function () {
      $("#panel").slideUp();
    });
  });
 
  // 方法二
  // $(document).ready(function () {
  //   $("#flip").hover(function () {
  //     $("#panel").slideToggle();
  //   });
  // });
 
script>
html>
🔗实现效果

ps：动态图里面的贴图是这张

方法	说明
show([speed,[easing],[fn]])	显示隐藏的匹配元素
hide([speed,[easing],[fn]])	隐藏显示的匹配元素
toggle([speed],[easing],[ fn])	元素显示与隐藏切换

方法	说明
slideDown([speed],[easing],[ fn])	垂直滑动显示匹配元素（向下增大、滑动）
slideUp([speed,[easing],[ fn]])	垂直滑动显示匹配元素（向上减小、滑动）
slideToggle([speed],[easing],[ fn])	在slideUp()和slideDown()两种效果间的切换

📚持续更新🔥

相关阅读:
Spring BeanPostProcessor 代码实践
 8月最新修正版风车IM即时聊天通讯源码+搭建教程
 设计模式定义
 VUE项目build后自动生成zip压缩包
 算法系列十：十大经典排序算法之——堆排序
 Segment Routing — SR-MPLS over UDP
node 第七天手写前后端jsonp(一个古老的绕过跨域的方法)
如何化解35岁危机？华为云数据库首席架构师20年技术经验分享
 leetcode - 学习计划之数据结构入门
 【算法系列篇】与链表相关的算法
原文地址：https://blog.csdn.net/weixin_53231455/article/details/127991609