jQuery：动画 节点

jQuery：动画 & 节点

    • 定位
      • 获取位置
      • 滚动距离
    • 动画
      • 显示隐藏
      • 淡入淡出
      • 展开收起
      • 动画队列
      • 自定义动画
      • 动画回调函数
      • 动画延迟
    • 节点
      • 插入节点
      • 删除节点

定位

获取位置

jquery提供了两个方法，来获取元素所处的位置：

// 取值
jQuery对象.offset()
// 取值
jQuery对象.position()

其提供了两种方法来获取元素的位置，这两种方法的行为略有不同：

  1. 参照物：
    • offset：以<html>标签为参照物
    • position：以最近一级的带有定位的祖先元素为参照物
  2. 外边距：
    • offset：计算外边距
    • position：不计算外边距

示例：

<div class="outer">
  <div class="box"></div>
</div>
<script>
  console.log('offset:', $('.box').offset())
  console.log('position:', $('.box').position())

  $('.outer').css('position', 'relative') // 添加定位
  console.log('offset:', $('.box').offset())
  console.log('position:', $('.box').position())

  $('.box').css('margin-left', '50px')
  console.log('offset:', $('.box').offset())
  console.log('position:', $('.box').position())

</script>

输出结果：

offset: {top: 15, left: 28}
position: {top: 15, left: 28}

offset: {top: 15, left: 28}
position: {top: 0, left: 0}

offset: {top: 15, left: 78}
position: {top: 0, left: 0}

在outer盒子内部，嵌套了一个box盒子。第一次输出box的位置，top: 15, left: 28是outer外层盒子到<html>，这些在CSS修饰中，没有展示。

随后给outer添加了一个定位，再次输出，offset不变依然以<html>为参照物。而posotion的值改变了，因为此时outer带有定位属性，于是box的position改变参照物为outer。

最后给box添加了一个左边距，offset的left增加了，而position没有。因为position不计算外边距，而offset计算外边距。

滚动距离

对于页面的滚动距离，jQuery也提供了两种方法：

// 取值
jQuery对象.scrollLeft()
jQuery对象.scrollTop()

// 赋值
jQuery对象.scrollLeft('值')
jQuery对象.scrollTop('值')

如果不传参，方法就返回当前的值，如果传参，则设置指定值。

一般来说，常用$(windows).scroll()注册浏览器的滚动事件，而$('html').scrollTop()来控制页面的滚动距离。

动画

显示隐藏

// 显示
jQuery对象.show()
jQuery对象.show(持续时间)
// 隐藏
jQuery对象.hide()
jQuery对象.show(持续时间)
// 切换
jQuery对象.toggle()
jQuery对象.toggle(持续时间)

对于显示和隐藏，如果不传入参数，那么就是直接切换状态。如果传入一个数值，此时就会变成一个动画，逐渐出现或消失，持续时间以毫秒为单位。

示例：

<button class="show">show</button>
<button class="hide">hide</button>
<button class="toggle">toggle</button>
<div class="box"></div>
<script>
  $('.show').click(function () {
    $('.box').show(1000)
  })
  $('.hide').click(function () {
    $('.box').hide(1000)
  })
  $('.toggle').click(function () {
    $('.box').toggle(1000)
  })
</script>

以上代码，创建了三个按钮和一个盒子，给按钮绑定事件，修改盒子的显示状态。

输出结果：

请添加图片描述

淡入淡出

jQuery不只有简单的出现与消失来控制显示状态，还有一些其它的方法提供更加多样的效果。

// 淡入
jQuery对象.fadeIn()
jQuery对象.fadeIn(持续时间)
// 淡出
jQuery对象.fadeIn()
jQuery对象.fadeIn(持续时间)
// 切换
jQuery对象.fadeToggle()
jQuery对象.fadeToggle(持续时间)

接口用法与之前一致。

示例：

<button class="show">fadeIn</button>
<button class="hide">fadeOut</button>
<button class="toggle">fadeToggle</button>
<div class="box"></div>
<script>
  $('.show').click(function () {
    $('.box').fadeIn(1000)
  })
  $('.hide').click(function () {
    $('.box').fadeOut(1000)
  })
  $('.toggle').click(function () {
    $('.box').fadeToggle(1000)
  })
</script>

这和之前是相似的代码，只是改变了三个方法。

输出结果：

请添加图片描述

展开收起

jQuery的最后一个基本动画就是展开与收起。

// 展开
jQuery对象.slideDown()
jQuery对象.slideDown(持续时间)
// 收起
jQuery对象.slideUp()
jQuery对象.slideUp(持续时间)
// 切换
jQuery对象.slideToggle()
jQuery对象.slideToggle(持续时间)

使用方法和前两者一样。

示例：

<button class="show">slideDown</button>
<button class="hide">slideUp</button>
<button class="toggle">slideToggle</button>
<div class="box"></div>
<script>
  $('.show').click(function () {
    $('.box').slideDown(1000)
  })
  $('.hide').click(function () {
    $('.box').slideUp(1000)
  })
  $('.toggle').click(function () {
    $('.box').slideToggle(1000)
  })
</script>

输出结果：

请添加图片描述

动画队列

如果频繁地触发动画效果，就会触发一个延迟效果：

请添加图片描述

此处频繁点击了按钮触发动画，当点击结束后很长一段时间，动画依然在持续，这是因为动画队列的存在。

每当触发一个动画，这个动画就会进入动画队列，浏览器依次执行队列中的动画。当多次点击按钮，其实就是加入了很多个动画到队列内部，此时当鼠标不再点击，队列内部还有动画，所以它还会执行。

这种动画队列，会显得浏览器响应有延迟性，所以实际上常常需要在执行动画前，把动画队列清空，让用户的点击触发的动画，可以立马执行。

语法：

// 停止动画
jQuery对象.stop()
jQuery对象.stop(true)
jQuery对象.stop(true, true)

这个stop方法有三种传参形式，分别传入0 1 2个true：

  1. 无参：立刻终止当前动画，进入下一个动画
  2. true：立刻终止当前动画，清空队列，并定格在当前状态
  3. true true：立刻终止当前动画，清空队列，并且跳转到当前动画结束的状态

想要处理反应不灵敏的问题，只需要每次执行动画前，stop终止之前的动画：

<button class="show">slideDown</button>
<button class="hide">slideUp</button>
<button class="toggle">slideToggle</button>
<div class="box"></div>
<script>
  $('.show').click(function () {
    $('.box').stop().slideDown(1000)
  })
  $('.hide').click(function () {
    $('.box').stop().slideUp(1000)
  })
  $('.toggle').click(function () {
    $('.box').stop().slideToggle(1000)
  })
</script>

此处的stop是无参数的，因为确保每次新的动画产生，都会立刻终止前一个动画，所以可以确保动画队列从始至终只有一个动画。

输出结果：

请添加图片描述

这一次，点击按钮后反应就非常的迅速，因为会立刻终止上一次的动画，保证这次的动画立刻执行。

自定义动画

为了支持更加复杂的动画效果，jQuery提供了animate方法：

jQuery对象.animate({属性}, 时间)

其第一个参数为一个对象，对象内部是要变化的属性值，以键值对的形式。第二个参数是时间，即整个动画持续的时间，以毫秒为单位。

在第一个参数内部，只有支持数值类的属性，比如%、px或者纯数字。如果说color这样的属性，就不能通过动画改变。

示例：

<button class="animate">animate</button>
<div class="box"></div>
<script>
  $('.animate').click(function () {
    $('.box').animate({
      height: 50,
      width: 150,
      marginLeft: 100,
      marginTop: 150
    }, 1000)
  })
</script>

以上案例中，给box创建了一个动画，该动画会改变box的宽高，以及左边距和上边距，共持续一秒。

输出结果：

请添加图片描述

这样就完成了一个多个属性都在改变的复杂动画。

动画回调函数

在动画结束后，jQuery允许立刻执行一个回调函数，来处理一些动画的后续动作。

语法：

jQuery对象.基础动画方法(回调函数)
jQuery对象.基础动画方法(时间, 回调函数)
jQuery对象.animate({属性}, 回调函数)
jQuery对象.animate({属性}, 时间 , 回调函数)

动画分为三种基础动画和animate实现的复杂动画，想要执行回调函数，在原先的传参情况下，最后一个参数额外填入一个回调函数即可。

在回调函数内部，this是触发动画的DOM元素，这可以很方便的进行一些收尾的样式调整。

示例：

<button class="animate">animate</button>
<div class="box"></div>
<script>
  $('.animate').click(function () {
    $('.box').animate(
      { width: 400 },
      2000,
      function () {
        $(this).css('backgroundColor', 'pink')
      })
  })
</script>

之前提到过，animate只能处理数值类的属性，背景色backgroundcolor就不允许在动画中调整。此时就可以在动画结束时，通过回调函数内的$(this)修改背景色。

输出结果：

请添加图片描述

动画延迟

如果希望在用户操作后，延迟一段时间再播放动画，此时可以时使用延迟方法。

语法：

jQuery对象.delay(延迟时间).动画方法()

此处的delay就用于延迟，延迟后返回的还是原先的对象，可以继续执行动画方法，比如animate，延迟时间以毫秒为单位。

这个延迟可以穿插在多个动画中：

$('.test')
	.delay(1000).animate({...})
	.delay(1000).animate({...})
	.delay(1000).animate({...})

以上代码就是三个动画连续播放的样例，在每两个动画方法之间，插入一个delay，也就是一个动画结束后一秒播放另一个动画。

节点

插入节点

jQuery封装了在指定位置动态插入元素节点的方法，可以灵活的增加节点以及改变节点的位置。

语法：

父节点.append(参数)    // 插入到父节点的尾部
父节点.prepend(参数)   // 插入到父节点开头
兄弟节点.before(参数)  // 插入到兄弟节点前面
兄弟节点.after(参数)   // 插入到兄弟节点后面

在参数中填入要插入的元素，这个参数可以是文本形式的HTML标签，也可以是通过原生DOM创建的对象。

示例：

<button class="append">append</button>
<button class="before">before</button>
<div class="container">
  <div class="child">A</div>
  <div class="child">B</div>
  <div class="child">C</div>
</div>
<script>
  $('.append').click(function(){
    $('.container').append('<div class="child new">D</div>')
  })

  $('.before').click(function(){
    $('.new').before('<div class="child">E</div>')
  })
</script>

以上代码，测试append和cefore方法。首先在父亲容器container的末尾，插入一个子元素D，随后在D的前面又插入一个兄弟节点E。

输出结果：

请添加图片描述

这四个方法不仅可以插入新元素，也可以移动现有元素的位置：

<button class="append">append</button>
<div class="container">
  <div class="child A">A</div>
  <div class="child B">B</div>
  <div class="child C">C</div>
</div>
<script>
  $('.append').click(function(){
    $('.container').append($('.A'))
  })
</script>

以上代码，把元素A插入到container的末尾，由于A是本身就存在的元素，所以会产生一个移动的效果。

输出结果：

请添加图片描述

删除节点

在原生DOM中，删除节点是比较麻烦的行为，要找到节点的父亲，然后从父亲把节点删掉。jQuery简化了该过程，谁调用方法，就删掉谁。

语法：

jQuery对象.remove()

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/900456.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【JVM】—深入理解ZGC回收器—背景概念回收流程

【JVM】—深入理解ZGC回收器—背景概念回收流程

深入理解ZGC回收器—背景概念&回收流程 ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记链接&#x1f449;https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个star~&#x1f60a; 文章目录 深入…
阅读更多...
采集QQ群成员的过程中遇到的问题

采集QQ群成员的过程中遇到的问题

错误思路一&#xff1a;通过抓取windows的QQ软件来获取QQ成员 难点&#xff1a;通过spy获取不到节点和句柄 正确思路&#xff1a;通过抓取手机版本的QQ来获取QQ成员 用到的开发工具 开维控制精灵 按键精灵助手 查找节点 有自带的函数,比如cs控件类cs.id 能提取所有节点js…
阅读更多...
基于KV260的基础视频链路通路（MIPI+Demosaic+VDMA）

基于KV260的基础视频链路通路（MIPI+Demosaic+VDMA）

目录 1. 简介 1.1 要点 1.2 背景 1.2.1 Got stuck 1.2.2 Cant be Initialized 2. Overlay 2.1 参考 Overlay 2.1.1 KV260 Base 2.1.2 Pynq-CV-OV5640 2.2 自建 Overlay 2.2.1 IIC IP 2.2.2 MIPI CSI-2 Rx 2.2.3 AXI4-S Subset 2.2.4 Demosaic 2.2.5 Pixel Pack …
阅读更多...
非个人小程序注册材料及认证流程

非个人小程序注册材料及认证流程

一、注册材料 1、 电子邮箱A、 未被微信公众平台注册B、 未被微信开放平台注册C、 未被个人微信号绑定过&#xff0c;如果被绑定了需要解绑 或 使用其他邮箱&#xff08;如已被占用建议找回账号登录或换邮箱注册&#xff09;2、 管理员手机号码3、 管理员个人身份证&#xff08…
阅读更多...
小程序云开发CMS新版数据模型讲解，可视化网页管理后台，内容管理对数据库进行增删改查操作，新闻小程序实战学习

小程序云开发CMS新版数据模型讲解，可视化网页管理后台，内容管理对数据库进行增删改查操作，新闻小程序实战学习

一直跟着石头哥学习小程序开发的同学比较清楚cms是什么&#xff0c;cms就是可以进行可视化的管理云开发数据库的网页后台。有了cms我们可以很方便的管理云开发数据库。 但是云开发官方一直改版&#xff0c;所以现在cms功能被整合到了云开发的数据模型里&#xff0c;也就是现在想…
阅读更多...
opencv 图像翻转- python 实现

opencv 图像翻转- python 实现

在做图像数据增强时会经常用到图像翻转操作 flip。 具体代码实现如下&#xff1a; #-*-coding:utf-8-*- # date:2021-03 # Author: DataBall - XIAN # Function: 图像翻转import cv2 # 导入OpenCV库path test.jpgimg cv2.imread(path)# 读取图片 cv2.namedWindow(image,1) …
阅读更多...
第十一章 TypeScript模块和命名空间的介绍和使用

第十一章 TypeScript模块和命名空间的介绍和使用

文章目录 一、模块1. 导出基础导出重新导出导出重命名 2. 导入基础导入导入重命名 3. 默认导出4. 模块化兼容exports import require()编译结果 二、命名空间1. 例子2. 命名空间3. 引入命名空间 三、模块和命名空间 一、模块 JavaScript 在 ES2015 中引入了模块的概念&#x…
阅读更多...
【331】基于Springboot的“有光”摄影分享网站系统

【331】基于Springboot的“有光”摄影分享网站系统

“有光”摄影分享网站设计与实现 摘 要 自互联网的发展至今&#xff0c;其基础理论与技术都已完善&#xff0c;并积极参与了整个社会各个领域。它容许信息根据媒体传播&#xff0c;并和信息可视化工具一起为大家提供优质的服务。对于信息多头管理、差错率高、信息安全系数差、…
阅读更多...
【GAMES101笔记速查——Lecture 18 Advanced Topics in Rendering】

【GAMES101笔记速查——Lecture 18 Advanced Topics in Rendering】

目录 1 渲染前沿 1.1 有偏vs无偏 1.2 无偏光线传播方法&#xff08;Unbiased light transport methods&#xff09; 1.2.1 双向路径追踪&#xff08;Bidirectional path tracing&#xff0c;BDPT&#xff09; &#xff08;1&#xff09;双向路径追踪(BDPT)举例 1.2.2 Metr…
阅读更多...
《等保测评新视角：安全与发展的双赢之道》

《等保测评新视角：安全与发展的双赢之道》

在数字化转型的浪潮中&#xff0c;企业面临的不仅是技术革新的挑战&#xff0c;更有信息安全的严峻考验。等保测评&#xff0c;作为国家网络安全等级保护的一项重要措施&#xff0c;不仅为企业的安全护航&#xff0c;更成为推动企业高质量发展的新引擎。本文将从全新的视角&…
阅读更多...
YOLOv11[基础]】热力图可视化实践② | 视频版 | 输入为视频文件

YOLOv11[基础]】热力图可视化实践② | 视频版 | 输入为视频文件

目录 一 热力图 二 安装YOLOv11 三 实践
阅读更多...
中航资本：光伏股，集体涨停！千亿龙头，罕见封板！

中航资本：光伏股，集体涨停！千亿龙头，罕见封板！

今日早盘&#xff0c;A股放量走强&#xff0c;半日成交超越万亿元。北证50指数持续放量上攻&#xff0c;飙升逾8%&#xff0c;再创前史新高&#xff0c;创业板指大涨逾3%&#xff0c;克复2200点&#xff0c;上证指数站上3300点。 盘面上&#xff0c;BC电池、固态电池、房地产、…
阅读更多...
迁移学习|ResNet18

迁移学习|ResNet18

一、导入库 二、设置随机种子 三、数据增强和数据加载 四、加载预训练模型 五、定义损失函数和优化器 六、学习率调度器 七、训练模型 八、可视化训练过程 九、总结 1. 常见优化器概述 1.1 随机梯度下降&#xff08;SGD: Stochastic Gradient Descent&#xff09; 简介&…
阅读更多...
CentOS系统Nginx的安装部署

CentOS系统Nginx的安装部署

CentOS系统Nginx的安装部署 安装包准备 在服务器上准备好nginx的安装包 nginx安装包下载地址为&#xff1a;https://nginx.org/en/download.html 解压 tar -zxvf nginx-1.26.1.tar.gz执行命令安装 # 第一步 cd nginx-1.26.1# 第二步 ./configure# 第三步 make# 第四步 mak…
阅读更多...
基于RabbitMQ，Redis，Redisson，RocketMQ四种技术实现订单延时关闭功能及其相关优缺点介绍（以12306为主题）

基于RabbitMQ，Redis，Redisson，RocketMQ四种技术实现订单延时关闭功能及其相关优缺点介绍（以12306为主题）

目录 1. 延迟关闭订单 1.1 订单延时关闭功能技术选型 1.1.1 定时任务 1.1.2 RabbitMQ 1.1.3 Redis 过期监听 1.1.4 Redisson 1.1.5 RocketMQ 1.2 RocketMQ订单延时关闭发送方实现 1.3 RocketMQ订单延时关闭的消费方实现 1. 延迟关闭订单 用户发起订单后&#xff0c;如…
阅读更多...
校园表白墙源码修复版

校园表白墙源码修复版

此校园表白墙源码基于thinkphp&#xff0c;因为时代久远有不少bug&#xff0c;经本人修复已去除大部分bug&#xff0c;添加了美化元素。 https://pan.quark.cn/s/1f9b3564c84b https://pan.baidu.com/s/1bb9vu9VV2jJoo9-GF6W3xw?pwd7293 https://caiyun.139.com/m/i?2hoTc…
阅读更多...
Etcd 可观测最佳实践

Etcd 可观测最佳实践

简介 Etcd 是一个高可用的分布式键值存储系统&#xff0c;它提供了一个可靠的、强一致性的存储服务&#xff0c;用于配置管理和服务发现。它最初由 CoreOS 开发&#xff0c;现在由 Cloud Native Computing Foundation (CNCF) 维护。Etcd 使用 Raft 算法来实现数据的一致性&…
阅读更多...
AI运动抽取转3D动画

AI运动抽取转3D动画

用的Wonder Studio&#xff0c;不免费哈&#xff0c;也不能试了&#xff0c;都要钱。只能看别人的经验。 网址https://wonderdynamics.com/ 先别激动&#xff0c;参考别人的评论 登录后&#xff08;google登录&#xff09;界面如下 收费情况 视频教程 https://www.youtube.co…
阅读更多...
【记录】VSCode｜自用设置项

【记录】VSCode｜自用设置项

文章目录 1 基础配置1.1 自动保存1.2 编辑区自动换行1.3 选项卡换行1.4 空格代替制表符1.5 开启滚轮缩放 2 进阶设置2.1 选项卡不自我覆盖2.2 选项卡限制宽度2.3 选项卡组限制高度2.4 字体设置2.5 字体加粗2.6 侧边栏2.7 沉浸式代码模式 Zen Mode2.8 设置 Zen 模式的选项卡组 3…
阅读更多...
深入了解 kotlinx-datetime：配置与使用指南

深入了解 kotlinx-datetime：配置与使用指南

深入了解 kotlinx-datetime&#xff1a;配置与使用指南 在Kotlin多平台开发中&#xff0c;处理日期和时间是常见的需求。kotlinx-datetime库提供了强大且简洁的API来帮助开发者应对这一挑战。本文将详细介绍如何配置kotlinx-datetime库&#xff0c;并通过生动的示例演示其核心…
阅读更多...
最新文章

Copyright @ 2022~2023