jQuery - 动画效果
时间:2019-09-23
本文章向大家介绍jQuery - 动画效果,主要包括jQuery - 动画效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
jQuery动画分为三个部分
- jquery内置动画
- jquery非内置动画
- jquery动画的设置
jquery内置动画
隐藏显示
在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法。
括号中为动画持续的时间,单位是毫秒
括号中还可以加上回调函数
//隐藏div $("#btn1").click(function(){ $("#box").hide(1000); }) //显示div $("#btn2").click(function(){ $("#box").show(1000); }) //隐藏/显示div $("#btn3").click(function(){ $("#box").toggle(1000); })
效果如下:
jquery中的动画还支持连缀
//持续动画,1s隐藏之后,2s显示,然后改变背景色为黄色 $("#btn1").click(function(){ $("#box").hide(1000).show(2000,function(){ $("#box").css("background","yellow") }) })
效果如下:
下拉与上拉
jQuery 滑动方法可使元素上下滑动。
- slideDown();
- slideUp();
- slideToggle();
//上拉 $("#btn1").click(function(){ $("#box").slideUp(1000); }) //下拉 $("#btn2").click(function(){ $("#box").slideDown(1000); }) //上拉/下拉 $("#btn3").click(function(){ $("#box").slideToggle(1000); })
效果如下:
淡入淡出
jq当中,提供了四个方法实现淡入淡出,如下:
- fadeIn() 淡入隐藏元素
- fadeOut() 淡出可见元素
- fadeToggle() 淡入淡出效果切换
- fadeTo() 渐变到给定透明度 参数: speed,opacity(0-1),callback
//淡出 $("#btn1").click(function(){ $("#box").fadeOut(1000); }) //淡入 $("#btn2").click(function(){ $("#box").fadeIn(1000); }) //淡入/淡出 $("#btn3").click(function(){ $("#box").fadeToggle(); }) //透明度0.5 $("#btn4").click(function(){ $("#box").fadeTo(1000,0.5); })
效果如下:
jQuery的非内置动画
jq当中可以通过animate()来实现动画效果,语法如下:
$(selector).animate({params},speed,callback);
//向右移动200px $("#btn").click(function(){ $(".box").animate({ left:200 }) })
效果如下:
animate动画还可以连续设置
$("#btn").click(function(){ $(".box").animate({ left:200 }).animate({ top:200 }).animate({ left:0 }).animate({ top:0 }) })
效果如下:
通过动画组合可以实现多种动画,例如:div向右上收缩
$(".box").animate({ width:0, height:0, left:100, top:0 })
效果如下:
停止动画
我们可以通过stop()方法停止动画。
语法如下:
$(selector).stop(stopAll,goToEnd);
jQuery stop() 方法用于----在动画完成之前停止动画或效果。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
stop():两个参数,都是布尔值,默认为false
- 动画队列:false:不操作;true:清空了
- 当前动画:false:立即停止;true:立即到终点
默认地,stop() 会清除在被选元素上指定的当前动画。
$("#btn").click(function(){ $(".box").animate({ left:200 },2000).animate({ top:200 },2000).animate({ left:0 },2000).animate({ top:0 },2000) }) $("#btn2").click(function(){ $(".box").stop(false,true); })
效果如下
原文地址:https://www.cnblogs.com/yad123/p/11571881.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- maven实战之旅第四篇——利用maven archetype手动建立一个maven项目
- 一起刷 leetcode 之旋转矩阵
- exe调用DLL的方式
- 聊聊claudb的DatabaseCleaner
- Stata | 排名转为得分
- kafka使用avro序列化和反序列化
- avro使用schema生成java文件
- zabbix_sender安装和使用
- zabbix_get安装和使用
- rabbitmq搭建集群踩坑记
- Elasticsearch升级踩坑记之升级elasticsearch2.x到elasticsearch5.x
- 变量判断与设置
- 变量的删除与替换
- linux 正则表达式详解
- grafana使用教程之安装worldPing插件