jQuery动画与特效

显示与隐藏动画

语法:

 $('obj').show(duration,fn);显示

$('obj').hide(duration,fn);隐藏

$('obj').toggle();

功能:

1. show()方法能动态地改变当前元素的高度、宽度和不透明度,最终显示当前元素;

2. hide()方法会动态地改变当前元素的高度、宽度和不透明度,最终隐藏当前元素。

参数:duration表示动画执行的速度,以毫秒为单位或关键字

$('obj').show(3000,fn);3秒完成显示

关键字:

slow 慢的 速度0.6秒/600毫秒

normal 常规的  速度0.4秒/400毫秒

fast 快速的  速度0.2秒/200毫秒

淡入淡出动画

语法:

$('obj').fadeIn(duration,fn);淡入

  $('obj').fadeOut(duration,fn);淡出

  $('obj').fadeToggle();

  $('obj').fadeTo(duration,opacity,fn); 淡入到指定透明度。

功能:

1. fadeIn() 方法可以动态地改变当前元素的透明度(其他不变),实现淡入的动画效果,最终显示当前元素;

2. fadeOut() 方法可以动态地改变当前元素的透明度(其他不变),实现淡出的动画效果,最终隐藏当前元素。

3.fadeTo() 方法可以改变元素的透明度到指定某一个值;参数opacity 用于指定不透明值,取值范围是0~1(0代表完全透明,1代表完全不透明)

滑入滑出动画

语法:

$('obj').slideDown(duration,fn);

$('obj').slideUp(duration,fn);

$('obj').slideToggle(duration,fn);

功能:

1. slideDown() 方法会动态地改变当前元素的高度(其他不变),由上到下滑入,即高度向下增大,使其呈现出一种“滑动”的效果,直至最终显示当前元素。

2. slideUp() 方法会动态地改变当前元素的高度(其他不变),由下到上滑出,即高度向上减小,直至最终隐藏当前元素。

自定义动画

语法:animate(properties,duration,fn)

参数:properties参数表示动画设置的样式属性;只能是以数字值形式存在的样式属性,如宽度、高度、字体大小、字体粗细、透明度等。

duration:速度参数,以毫秒为单位或关键字

fn:调用的函数

队列动画:

概念:指在元素中执行一个以上的多个动画效果,即有多个 animate()方法在元素中执行,动画的效果便按“队列”的顺序进行展示。

栗子:

$(this).animate({height:100},"slow");// 第 1 列$(this).animate({width:100},"slow");// 第 2 列$(this).animate({height:50},"slow");// 第 3 列$(this).animate({width:50},"slow");// 第 4 列

结束动画:

概念:stop() 方法能够结束当前的动画,并立即进入到下一个动画;

不带任何参数的 stop() 方法,则会立即停止当前正在执行的动画,如果后面还有动画要继续,则以当前状态开始接下来的动画;

clearQueue 参数表示是否清空未执行完的动画队列;

gotoEnd 参数表示是否立即完成正在执行的动画。

作用:避免当用户光标进入或移出的速度太快,导致移入移出与对应的动画不一致。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI办公自动化:多音频轨电影视频抽取出英语音频

很多电影视频是有中、英、粤语等多个音频轨的,如果直接转换成音频,很有可能不是自己想要的那种语音。 可以先查看音频流信息,确定属于哪个音频轨: Reading video file: E:\1-7\比得兔1.mp4 输出音频流信息 Available audio str…

利用viztracer进行性能分析和优化

上一篇文章,我们详细讲解了scalene这个性能分析和优化工具的使用流程;今天,我们将深入探讨另一个性能分析和优化工具——viztracer。 什么是viztracer? viztracer是一个非常强大的分析器,可以生成详细的性能报告和可…

设计师进阶指南:掌握这6条版式设计要点

布局设计是设计师的必修课。优秀的排版不是强制性的“东拼西凑”,而是通过设计师独特的排版获得的。这不是简单的信息列表,而是认真思考如何分层、有节奏地组织和安排元素。今天我将给你带来它 6 文章还附带了布局设计模板资源,设计师朋友一定…

《Windows API每日一练》6.1 鼠标基础知识

本节我们讲述鼠标的一些基础知识。 本节必须掌握的知识点: 鼠标 6.1.1 鼠标 鼠标是1964年由Douglas Engelbart发明的,用来取代由键盘输入的繁琐指令,简化电脑操作。早期的鼠标是单键鼠标,只有一个键,后来逐步改进为双…

EthernetIP IO从站设备数据 转opc ua项目案例

1 案例说明 设置网关采集EthernetIP IO设备数据把采集的数据转成opc ua协议转发给其他系统。 2 VFBOX网关工作原理 VFBOX网关是协议转换网关,是把一种协议转换成另外一种协议。网关可以采集西门子,欧姆龙,三菱,AB PLC&#xff0…

Element 页面滚动表头置顶

在开发后台管理系统时,表格是最常用的一个组件,为了看数据方便,时常需要固定表头。 如果页面基本只有一个表格区域,我们可以根据屏幕的高度动态的计算出一个值,给表格设定一个固定高度,这样表头就可以固定…

红酒达人教你秘技:选酒、存酒,一招一式皆学问

在繁忙的都市生活中,红酒不仅仅是一种饮品,更是一种生活态度,一种品味的象征。然而,面对琳琅满目的红酒品牌与种类,如何选择一瓶心仪的红酒,又如何妥善保存,使其保持很好口感,成为了…

python函数练习

1、编写函数&#xff0c;传入N&#xff0c;求123…N的和 def s_sum(num):i 1sum1 0while i < num:sum1 ii 1return sum1num int(input(请输入一个整数&#xff1a;)) print(和为:,s_sum(num))2、编写一个函数&#xff0c;定义一个列表&#xff0c;求列表中的最大值 d…

LabVIEW遇到无法控制国外设备时怎么办

当使用LabVIEW遇到无法控制国外产品的问题时&#xff0c;解决此类问题需要系统化的分析和处理方法。以下是详细的解决思路和具体办法&#xff0c;以及不同方法的分析和比较&#xff0c;包括寻求代理、国外技术支持、国内用过的人请教等内容。 1. 了解产品的通信接口和协议 思路…

LeetCode.25K个一组翻转链表详解

问题描述 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节…

Python 基础 (标准库):collections (集合类)

1. 官方文档 collections --- 容器数据类型 — Python 3.12.4 文档 Python 的 collections 模块提供了许多有用的数据类型&#xff08;包括 OrderedDict、Counter、defaultdict、deque 和 namedtuple&#xff09;用于扩展 Python 的标准数据类型。掌握 collections 中的数据类…

五子棋纯python手写,需要的拿去

import pygame,sys from pygame import * pygame.init()game pygame.display.set_mode((600,600)) gameover False circlebox [] # 棋盘坐标点存储 box [] def xy():for x in range(0,800//40): for y in range(0,800//40): box.append((x*40,y*40)) xy() defaultColor wh…

postman接口工具的详细使用教程

Postman 是一种功能强大的 API 测试工具&#xff0c;可以帮助开发人员和测试人员轻松地发送 HTTP 请求并分析响应。以下是对 Postman 接口测试工具的详细介绍&#xff1a; 安装与设置 安装步骤 访问 Postman 官网&#xff0c;点击右上角的“Download”按钮。 选择你的操作系统…

8.DELL R730服务器对RAID5进行扩容

如果服务器的空间不足了&#xff0c;如何进行扩容&#xff1f;我基本上按照如何重新配置虚拟磁盘或添加其他硬盘来进行操作。我的机器上已经有三块硬盘了&#xff0c;组了Raid5&#xff0c;现在再添加一块硬盘。 先把要添加的硬盘插入服务器&#xff0c;无论是在IDRAC还是管理…

leetcode153:寻找旋转排序数组中的最小值

题目链接&#xff1a;153. 寻找旋转排序数组中的最小值 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int findMin(vector<int>& nums) {int left 0, right nums.size() - 1;while(left < right){int mid left (right - left) / 2;if(nu…

物联网“此用户无权修改接入点名称设置”解决方案

根本原因apns-conf.xml里面没有 符合 物理网卡 的配置 可以先加一个APN试一下&#xff0c;看看默认的MCC和MNC是什么 然后在”命令行“查询一下 adb shell sqlite3 /data/user_de/0/com.android.providers.telephony/databases/telephony.db "select * from carriers wh…

乐鑫已支持Matter 1.2标准新增多种设备类型,启明云端乐鑫代理商

随着物联网技术的飞速发展&#xff0c;智能家居正逐渐成为现代生活的一部分。物联网和智能家居行业应用取得了巨大的增长&#xff0c;一系列无线连接的智能设备涌入家庭&#xff0c;为家庭生活带来自动化和便利。 像是可以连网的扬声器、灯泡和中控开关&#xff0c;它们都可以…

迁移学习——CycleGAN

CycleGAN 1.导入需要的包2.数据加载&#xff08;1&#xff09;to_img 函数&#xff08;2&#xff09;数据加载&#xff08;3&#xff09;图像转换 3.随机读取图像进行预处理&#xff08;1&#xff09;函数参数&#xff08;2&#xff09;数据路径&#xff08;3&#xff09;读取文…

MySQL笔记——索引

索引 SQL性能分析使用原则SQL提示覆盖索引前缀索引单列索引和联合索引索引设计原则 学习黑马MySQL课程&#xff0c;记录笔记&#xff0c;用于复习。 查询建表语句&#xff1a; show create table account;以下为建表语句&#xff1a; CREATE TABLE account (id int NOT NULL …

Redis-集群-环境搭建

文章目录 1、清空主从复制和哨兵模式留下的一些文件1.1、删除以rdb后缀名的文件1.2、删除主从复制的配置文件1.3、删除哨兵模式的配置文件 2、appendonly修改回no3、开启daemonize yes4、protect-mode no5、注释掉bind6、制作六个实例的配置文件6.1、制作配置文件redis6379.con…