返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一篇文章带你了解jQuery动画
  • 279
分享到

一篇文章带你了解jQuery动画

2024-04-02 19:04:59 279人浏览 薄情痞子
摘要

目录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执行完以后函数执行完之后,要实行的函数

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: 一篇文章带你了解jQuery动画

本文链接: https://lsjlt.com/news/157353.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 一篇文章带你了解jQuery动画
    目录1.控制元素的显示与隐藏 show() hide()2.控制元素的透明度 fadeIn() fadeOut()3:控制元素的高度 slideUp() slideDown()总结 ...
    99+
    2024-04-02
  • 一篇文章带你了解mybatis的动态SQL
    目录1、动态SQL:if 语句3、动态SQL:if+set 语句4、动态SQL:choose(when,otherwise) 语句5、动态SQL:trim 语句6、动态SQL: SQ...
    99+
    2024-04-02
  • 一篇文章带你了解初始Spring
    目录为什么要使用SpringSpring概述Spring容器使用流程1.启动容器2.完成bean的初始化3.注册bean到容器中4.装配bean的属性bean的注册bean属性注入总...
    99+
    2024-04-02
  • 一篇文章带你了解JavaScript-对象
    目录创建对象对象直接量通过new创建对象原型Object.create()属性的查询和设置继承属性访问错误删除属性检测属性序列化对象总结创建对象 对象直接量 对象直接量是由若干名/值...
    99+
    2024-04-02
  • 一篇文章带你了解JavaScript-语句
    目录表达式语句复合语句和空语句复合语句空语句声明语句varfunction条件语句ifif/elseelse ifswitch循环whiledo/whileforfor/in跳转标签...
    99+
    2024-04-02
  • 一篇文章带你了解XGBoost算法
    目录1. 什么是XGBoost1.1 XGBoost树的定义1.2 正则项:树的复杂度1.3 树该怎么长1.4 如何停止树的循环生成2. XGBoost与GBDT有什么不同3. 为什...
    99+
    2024-04-02
  • 一篇文章带你了解Java Stream流
    目录一、Stream流引入现有一个需求:1.用常规方法解决需求2.用Stream流操作集合,获取流,过滤操作,打印输出二、Stream流的格式三、获取流四、Stream流的常用方法方...
    99+
    2024-04-02
  • 一篇文章带你了解Java SpringBoot Nacos
    目录1、什么是Nacos 1.1与eureka对比1.2与zookeeper对比1.3与springcloud config 对比 2、Spring Cloud Alibaba 套件...
    99+
    2024-04-02
  • 一篇文章带你了解vue路由
    目录概念Vue Router简介Vue Router的特性Vue Router的使用步骤分类嵌套路由动态路由命名路由编程式导航总结概念 路由的本质就是一种对应关系,比如说我们在url...
    99+
    2024-04-02
  • 一篇文章带你了解SpringBoot Web开发
    目录SpringBoot Web开发静态资源定制首页thymeleaf模板引擎1、导入依赖2、controller书写源码分析Thymeleaf语法基本语法:MVC配置原理总结Spr...
    99+
    2024-04-02
  • 一篇文章带你了解Python中的类
    目录1、类的定义2、创建对象3、继承总结1、类的定义 创建一个rectangle.py文件,并在该文件中定义一个Rectangle类。在该类中,__init__表示构造方法。其中,s...
    99+
    2024-04-02
  • 一篇文章带你了解清楚Mysql 锁
    一丶为什么数据库需要锁 数据库锁设计的初衷是处理并发问题。作为多用户共享 的资源,当出现并发访问的时候,数据库需要合理地控制资源的访问规则。而锁就是用来实 现这些访问规则的重要数据结构。 根据加锁的范围,mysql 里面...
    99+
    2022-11-29
    mysql锁机制 mysql锁机制应用场景 mysql锁表和解锁语句
  • 一篇文章带你入门和了解Jquery的基础操作
    目录1.Jquery的使用步骤:(1)导入js库(2)页面载入事件2.Jq对象和js对象的转换(1)js对象------>jq对象(2)jq对象------>js对象3....
    99+
    2024-04-02
  • 一篇文章带你了解Spring AOP 的注解
    目录1、xml 的方式实现 AOP①、接口 UserService②、实现类 UserServiceImpl③、切面类,也就是通知类 MyAspect④、AOP配置文件 applic...
    99+
    2024-04-02
  • 一篇文章教带你了解Java Spring之自动装配
    目录在Spring中有三种装配的方式:1.Bean的自动装配1.1 autowire="byName" 实现自动装配1.2 autowire="byType" 实现自动装配2.注解实...
    99+
    2024-04-02
  • 一篇文章带你了解Python之Selenium自动化爬虫
    目录Python之Selenium自动化爬虫0.介绍1.安装2.下载浏览器驱动3.实例4.开启无头模式5.保存页面截图6.模拟输入和点击a.根据文本值查找节点b.获取当前节点的文本c...
    99+
    2024-04-02
  • 一篇文章带你了解MySQL索引下推
    目录前言SELECT 语句执行过程什么是索引下推?动手实验:索引下推限制拓展:虚拟列总结前言 本文围绕这三个话题来学习索引下推: SELECT 语句执行过程什么是索引下推?索引下推限制 SELECT 语句执行过...
    99+
    2024-04-02
  • 一篇文章带你了解SpringMVC数据绑定
    目录1.配置web.xml2.在resources目录下配springmvc_servlet.xml3.在WEB-INF目录下新建jsp文件夹4.在java目录下新建com.sxau...
    99+
    2024-04-02
  • 一篇文章带你深入了解Java封装
    目录如何实现封装代码展示构造方法注意点:代码展示总结如何实现封装 可以分为两步: 第一步:将类的变量声明为private。 第二步:提供公共set和get方法来修改和获取变量的值。 ...
    99+
    2024-04-02
  • 一篇文章带你深入了解javaIO基础
    目录一.认识IO1.IO的分类2.IO的方式3.IO读写的方式4.IO的特性二.文件操作1.文件的构成2.文件的创建3.文件操作的API使用三.IO流1.流的分类2.流的创建3.流的...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作