四:Jquery-animate
动画效果:
1.显示/隐藏动画效果
动态的改变当前元素的宽,高和不透明度
show([duration],[fn]); //显示当前元素
hide([duration],[fn]); //隐藏当前元素
toggle([duration],[fn]); //切换当前元素的可见状态
duration:动画效果运行的时间,默认为0,立即显示元素
关键字:"slow","normal","fast" - 0.6,0.4,0.2秒
数字:600,400,200,... 单位是毫秒
fn:在动画完成时执行的函数
2.淡入/淡出动画效果
动态的改变当前元素的透明度(其他不变)
fadeIn([duration],[fn]) //显示当前元素 - 淡入效果
fadeOut([duration],[fn]) //隐藏当前元素 - 淡出效果
fadeToggle([duration],[fn]) //切换当前元素的可见状态 -- duration默认为normal,0.4秒
fadeTo([duration],opacity,[fn]) //在指定时间内,从当前透明度淡到指定透明度
opacity:指定不透明值,取值范围是0-1,0代表完全透明,1代表完全不透明
3.滑入/滑出动画效果
动态的改变当前元素的高度(其他不变)
slideDown([duration],[fn]) //显示当前元素 - 由上到下滑入
slideUp([duration],[fn]) //隐藏当前元素 - 由下到上滑出
slideToggle([duration],[fn]) //切换当前元素的可见状态
4.自定义动画
动态的改变当前元素的各种CSS属性
animate(properties,[duration],[fn])
properties:使用一个"name:value"形式的对象,{name:value,name:value,...},用来设置改变的css属性
animate():只能改变可以取数字值的css属性,如大小,边框,定位,字体,背景,...
移动元素是需要显示元素的position属性为absolute/relative.
"队列"动画:元素执行多个动画效果,即元素执行多个animate()方法,按照方法的顺序进行动画效果的展示.
5.动画停止
stop()结束当前动画,立即进入到下一个动画
stop([clearQueue],[gotoEnd])
clearQueue:是否清空未执行完的动画队列.设置true,可以立即结束动画
gotoEnd:是否立即完成正在执行的动画.设置true,并且重设show和hide的原始样式,调用回调函数等
四:Jquery-animate的更多相关文章
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- 【转】使用jquery animate创建平滑滚动效果
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...
- jquery animate函数实现
jquery animate 函数 实现动画效果 参数一 比如高度宽度 之类的:'-=50' 参数二 速度之类 <html xmlns="http://www.w3.org/1999/ ...
- jQuery animate()动画效果
1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...
- jquery animate()背景色渐变的处理
jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 gitHub地址:https://github.com/jquery/jquery-color/ 使用代码: ...
- jQuery animate方法开发极客标签Logo动画融合效果
在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...
- jquery animate()方法 语法
jquery animate()方法 语法 作用:animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创 ...
- jQuery animate easing使用方法
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- JavaScript学习总结(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- jquery animate 改变元素背景颜色
通过animate不能直接设置css样式可以通过https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.j ...
随机推荐
- can not connect cube in performancce dashboard
需要在所有安装sharepoint服务器里面安装ADOMD组件 \Program Files\Microsoft Office Servers\15.0\WebServices\PpsMonitori ...
- LinkedBlockingQueue源码解析(1)
此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.对于LinkedBlockingQueue需要掌握以下几点 创建 入队(添加元素) 出队(删除元素) 2 ...
- Statement与PreparedStatement区别
1.性能区别 Statement statement = conn.createStatement(); PreparedStatement preStatement = conn.prepareSt ...
- docker镜像基本操作一
获取镜像 首先说明一下如何从Docker hub中获取高质量的镜像,从Docker镜像库获取镜像的命令是docker pull .其命令格式为: docker pull [选项] [Docker Re ...
- webpack快速入门——webpack3.X 快速上手一个Demo
1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...
- 【UOJ#435】【集训队作业2018】Simple Tree 分块+树链剖分
题目大意: 有一棵有根树,根为 1 ,点有点权.现在有 m 次操作,操作有 3 种:1 x y w ,将 x 到 y 的路径上的点点权加上 w (其中 w=±1w=±1 ):2 x y ,询问在 x ...
- python 批量模块导入(笔记)
环境:python3.6 目的:根据列表['os', 'sys', 're']中的字符串导入对应模块 from importlib import import_module modules = ['o ...
- sublime text3 --前端工程师必备
sublime text3 --前端工程师必备神器 导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题 ...
- python中如何打印某月日历
Calendar模块有很广泛的方法用来处理年历和月历,例如打印某月的月历: import calendar cal = calendar.month(2017, 10) print ("以下 ...
- [webrtc] rtcp模块中rtt时间计算
RTT指 round-trip time,即计算AB两端的往返时延 这里可以分成两个问题: 如何在A端估算A和B之间的RTT时间? 如何在B端估算A和B之间的RTT时间? 本文参考资料:rfc 355 ...