一篇文章带你了解jQuery动画

目录
  • 1.控制元素的显示与隐藏 show() hide()
  • 2.控制元素的透明度 fadeIn() fadeOut()
  • 3：控制元素的高度 slideUp() slideDown()
  • 总结
jQuery提供了一些默认的动画
    控制元素的显示与隐藏	    show()	hide()
	控制元素的透明度	        fadeIn()	fadeOut()
	控制元素的高度		    slideUp()		slideDown()
	自定义动画			    animate()

1.控制元素的显示与隐藏 show() hide()

语法：  

 $("selector").show([speed],[callback]);

参考描述： 

参数一：速度，可选 例如：1000毫秒等等与1秒 fast slow  normal

参数二：回调函数，可选 show或hide函数执行完之后，要实行的函数

$(function () {
			$(".nav-ul li").on({"mouseover":function () {
					$(this).css("background","pink")
				},"mouseout":function () {
					$(this).css("background","#ff2832")
				}});
			$(".menu-btn").hover(function () {
				$(this).next().show("fast")
			},function () {
				$(this).next().hide("slow")
			})
		})

2.控制元素的透明度 fadeIn() fadeOut()

语法：    

    $("selector").fadeIn([speed],[callback]);
    $("selector").fadeOut([speed],[callback]);

参考描述：

参数一：速度，可选 默认是0  例如：1000毫秒等等与1秒 fast slow  normal

参数二：回调函数，可选 fadeIn或fadeOut执行完以后函数执行完之后，要实行的函数

$(function () {
		$("input[name='fadein_btn']").click(function () {
			$("img:eq(0)").fadeIn(500,function () {
				alert("淡入成功")
			})
		})
		$("input[name='fadeout_btn']").click(function () {
			$("img:eq(0)").fadeOut(1000,function () {
				alert("淡出成功")
			})
		})
	})

3：控制元素的高度 slideUp() slideDown()

slideDown()    使元素逐渐延伸显示

slideUp()        使元素逐渐缩短直至隐藏

语法： 

    $("selector").slideUp([speed],[callback]);
    $("selector").slideDown([speed],[callback]);

参考描述：

参数一：速度，可选 默认是0  例如：1000毫秒等等与1秒 fast slow  normal

参数二：回调函数，可选 slideUp或slideDown执行完以后函数执行完之后，要实行的函数

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

赞 (0)

相关推荐

  • [jQuery] 事件和动画详解

    1. 事件 1.1 加载DOM 在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件.在JavaScript代码中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法.$(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别的.window.onload方法是在网页中所有的元素完全加载到浏览器后才执行,而$(document).ready()方法注册的事件处理程

  • 详解JQuery基础动画操作

    1.jQuery动画效果,隐藏和显示. 两个方法:hide()"隐藏"      show()"显示" <p>JQuery动画效果,隐藏和显示</p> <input type="button" value="隐藏" id="button1"> <input type="button" value="显示" id="b

  • jQuery实现广告显示和隐藏动画

    jQuery实现广告显示和隐藏动画

    我们经常会看到几秒后出现了广告,显示了几秒后广告就消失了,下面就用JQuery框架来实现这个功能. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>广告的自动显示与隐藏</title> <style> #content{width:100%;height:500px;background:#999} </style

  • jQuery操作动画完整实例分析

    本文实例讲述了jQuery操作动画.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery操作动画</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="

  • JQuery animate动画应用示例

    本文实例讲述了JQuery animate动画.分享给大家供大家参考,具体如下: 滑动选项卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .btns input{ width: 100px; h

  • 一篇文章带你了解jQuery动画

    目录 1.控制元素的显示与隐藏 show() hide() 2.控制元素的透明度 fadeIn() fadeOut() 3:控制元素的高度 slideUp() slideDown() 总结 jQuery提供了一些默认的动画 控制元素的显示与隐藏 show() hide() 控制元素的透明度 fadeIn() fadeOut() 控制元素的高度 slideUp() slideDown() 自定义动画 animate() 1.控制元素的显示与隐藏 show() hide() 语法:   $("sel

  • 一篇文章带你使用SpringBoot基于WebSocket的在线群聊实现

    一.添加依赖 加入前端需要用到的依赖: <dependency> <groupId>org.webjars</groupId> <artifactId>sockjs-client</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>org.webjars</groupId> <

  • 一篇文章带你使用Typescript封装一个Vue组件(简单易懂)

    一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code .进入Vs code编辑器(如果没有code .,需要将编辑器的bin文件目录地址放到环境变量的path中).然后,我进入编辑器之后,进入设置工作区,随便设置一个参数,这里比如推荐设置字号,点下.这里是为了生成.vscode文件夹,里面有个json文件. 我们在开发项目的时候,项目文件夹内的文件很

  • 一篇文章带你搞定SpringBoot中的热部署devtools方法

    一.前期配置 创建项目时,需要加入 DevTools 依赖 二.测试使用 (1)建立 HelloController @RestController public class HelloController { @GetMapping("/hello") public String hello(){ return "hello devtools"; } } 对其进行修改:然后不用重新运行,重新构建即可:只加载变化的类 三.热部署的原理 Spring Boot 中热部

  • 一篇文章带你搞定SpringBoot不重启项目实现修改静态资源

    一.通过配置文件控制静态资源的热部署 在配置文件 application.properties 中添加: #表示从这个默认不触发重启的目录中除去static目录 spring.devtools.restart.exclude=classpath:/static/** 或者使用: #表示将static目录加入到修改资源会重启的目录中来 spring.devtools.restart.additional-paths=src/main/resource/static 此时对static 目录下的静态

  • 一篇文章带你解决 IDEA 每次新建项目 maven home directory 总是改变的问题

    Maven是基bai于项目对象模型,可以通du过一小段描述信息来管理zhi项目的构建,报告和文档的软件项dao目管理工具. 重装个系统,各种问题,idea 也出现各种问题 装了个新版的 idea 2020 2.x 版本的,不知道咋回事,其他都好使,就是创建 SpringBoot 项目时: 加载 pom.xml 总是出错,原因就是,新建立的项目 maven home directory 总是乱,没有安装 设置的默认方式 我试了,改当前项目的,不好使 该默认设置,不好使,网上的其他方法也试了,很奇怪

  • 一篇文章带你搞定 springsecurity基于数据库的认证(springsecurity整合mybatis)

    一.前期配置 1. 加入依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.10</version> </dependency> <dependency> <groupId>mysql</groupId> &

  • 一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃

    由于 Ubuntu 中的汉字输入实在是太不友好了,所以装了个 搜狗输入法,好不容易把 搜狗输入法装好,本以为可以开开心心的搞代码了,然而... pycharm 一打开,就崩溃,关不掉,进程杀死还是不行,只能关机重启. 本以为 pycharm 出现了问题,又重装了两遍,还是不行. 最终发现竟然是搜狗输入法以及 fcitx 输入法的锅 唉,只能老老实实的把 fctix 和搜狗输入法卸载了: (1)Ubuntu 软件里卸载 fctix,然后将键盘输入法系统改成 IBus (2)卸载搜狗输入法 先查找软

  • 一篇文章带你搞懂Python类的相关知识

    一篇文章带你搞懂Python类的相关知识

    一.什么是类 类(class),作为代码的父亲,可以说它包裹了很多有趣的函数和方法以及变量,下面我们试着简单创建一个吧. 这样就算创建了我们的第一个类了.大家可以看到这里面有一个self,其实它指的就是类aa的实例.每个类中的函数只要你不是类函数或者静态函数你都得加上这个self,当然你也可以用其他的代替这个self,只不过这是python中的写法,就好比Java 中的this. 二.类的方法 1.静态方法,类方法,普通方法 类一般常用有三种方法,即为static method(静态方法),cl

  • 一篇文章带你了解Java中ThreadPool线程池

    一篇文章带你了解Java中ThreadPool线程池

    目录 ThreadPool 线程池的优势 线程池的特点 1 线程池的方法 (1) newFixedThreadPool (2) newSingleThreadExecutor (3) newScheduledThreadPool (4) newCachedThreadPool 2 线程池底层原理 3 线程池策略及分析 拒绝策略 如何设置maximumPoolSize大小 ThreadPool 线程池的优势 线程池做的工作主要是控制运行的线程数量,处理过程中将任务放入队列,然后在线程创建后启动这些

随机推荐