jquery学习(六)-jquery中的动画
参考锋利的jQuery第二版
1.show和hide方法
调用方法:element.hide()隐藏元素,element.show()显示元素。其实说白了,其原理就是将元素的样式display值设置为none或block。
若想让元素慢慢隐藏或显示,可以为其添加一个速度的参数,如element.show(500),表示元素会在500毫秒内慢慢显示出来。
2.fadeIn和fadeOut方法
fadeIn和fadeOut分别是实现元素淡入和淡出的方法。其原理是通过一段时间内改变元素的不透明度(opacity)动画来实现淡入淡出的效果的,直到元素最终显示(display:block)或消失(display:none)。
可设置动画时长,如element.fadeOut(500)。
3.slideUp和slideDown方法
slideUp和slideDown分别实现上收隐藏和下拉显示的功能。其原理是通过改变元素的高度动画来实现的。如果一个元素的display:none,通过调用slideDown方法是,使得元素由上至下延伸显示。slideUp刚好与slideDown相反。
可设置动画时长,如element.slideDown(500)。
4.自定义动画方法animate
方法使用animate(params,speed,easing,callback)
Params: 一组包含作为动画属性和终值的样式属性和及其值的集合。
Speed:s三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)。
Easing: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。
Callback:回调函数。
例如:element.animate({ height: '20px' }, 500,'ease-out',
function(){console.log(“改变高动画”)});
5.停止动画stop(clearQueue,gotoNnd)
clearQueue和gotoEnd都是可选参数,为Bool值。clearQueue表示是否清空当前未执行完的动画队列,gotoEnd表示是否将正在执行的动画跳转到末状态。
举个栗子:
$(element).hover(function(){
$(this).stop(false,true).animate({height:”300px”},200)
.animate({width:”200px”},300);
},function(){
$(this).stop(false,true).animate({height:”30px”},200)
.animate({width:”20px”},300);
});
6.判断处于动画状态
在使用动画的时候往往为了防止动画的积累,导致动画与用户行为不一致。此时就需要我们知道当前元素是否处于动画状态,当元素不出于动画阶段到为其添加动画,否则不添加。
举个栗子:
If(!$(element).is(“:animated”)){
//当没有动作状态时,才添加动画
}
7.动画延迟delay()
Delay方法允许我们将队列中的函数延迟执行。
$(element).animate({width:”20px”},300).delay(1000) //延迟1000毫秒
. animate({width:”200px”},300);
8.toggle方法元素状态切换
$(element).toggle(fn1,fn2,fn3…)轮流循环切换。
9.slideToggle方法
通过高度变化来切换匹配元素的可见性。即实现元素下拉显示和上滑隐藏切换。
$(element).slideToggle();
转载于:https://www.cnblogs.com/hcw136156133/p/5086915.html
jquery学习(六)-jquery中的动画相关推荐
- 【jQuery学习】—jQuery对象的访问
[jQuery学习]-jQuery对象的访问 一.each方法 作用:遍历jQuery对象中的元素 格式:jQuery对象.each(function(index, ele){}); 注意:index ...
- 【jQuery学习】—jQuery对象的过滤
[jQuery学习]-jQuery对象的过滤 一.eq方法 作用:获取对应下标的jQuery对象 格式:jQuery对象集合.eq(下标) 二.first方法 作用:获取匹配元素集合中的第一个元素 格 ...
- 【jQuery学习】—jQuery操作元素位置
[jQuery学习]-jQuery操作元素位置 一.position方法 作用:返回相对某个元素的偏移量 格式:元素.position() 返回值包含top属性和left属性的对象 如果祖先元素中没有 ...
- 【jQuery学习】—jQuery对象的串联
[jQuery学习]-jQuery对象的串联 一.add方法 作用:把表达式匹配的元素添加到jQuery中 格式:jQuery对象.add(表达式); 二.contents方法 作用:查找匹配元素内部 ...
- 【jQuery学习】—jQuery操作CSS和表格
[jQuery学习]-jQuery操作CSS和表格 一.jQuery操作CSS 二.jQuery操作表格
- jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- React学习(六)-React中组件的数据-state
虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 撰文 | 川川 ID:suibichuanji 点击下方 ...
- jquery学习之tab切换及动画效果,涉及animate(),siblings()
效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- jQuery学习笔记——jQuery选择器详解种类与方法
jQuery的选择器根据页面中元素的不同,可以分为基本选择器.层次选择器.表单选择器.过滤选择器,而过滤选择器又有简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器和表 ...
- jQuery 学习笔记(jQuery: The Return Flight)
第一课. ajax:$.ajax(url[, settings]) 练习代码: $(document).ready(function() {$("#tour").on(" ...
最新文章
- 【前端来刷LeetCode】两数之和与两数相加
- axure能做剪切蒙版吗_卫生间瓷砖不打掉能做防水吗
- Java平台无关性——跨平台
- 二分查找(c语言实现)
- PHPMailer - PHP email transport class
- Red and Black (找到一个标记一个)
- SDAutoLayout 一行代码搞定自动布局
- 【CF666E】Forensic Examination - 广义后缀自动机+线段树合并
- 电脑指定区域旋转_诸城全自动旋转门批发,医用病房门,请看
- Unity 阴影的制作方式
- 第八章 深度强化学习-Nature深度Q网络(Nature DQN)
- 视频教程-WPF MVVM 编程模式/框架 基础+提高 项目开发实战视频教程-.NET
- 多行文字cad提取数据_中望CAD如何快速批量提取txt文本数据
- node.js读取JSON文件
- 20182319彭淼迪第一周学习总结
- 怎样一次性压缩多张图片?这个无损批量压缩图片方法送给你
- 《人类简史:从动物到上帝》读书活动策划
- 试试mysql数据碎片整理吧解决astgo经常死机变慢的问题
- OKEx货币对价格数量长度及精度
- Xilinx vivado 常用IP核使用