四: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 ...
随机推荐
- 程序媛计划——mysql连接表
#inner join等值连接/内连接 mysql> select * from info; +------+-------------+----------+ | name | phone | ...
- Codeforces Round #456 (Div. 2) B. New Year's Eve
B. New Year's Eve time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- NPM install 中:-save 、 -save-dev 和 没有--save的情况
原文地址:https://www.cnblogs.com/limitcode/p/7906447.html npm install moduleName 命令 . 安装模块到项目node_module ...
- spring定时任务的注解实现方式
STEP 1:在spring配置文件中添加相应配置,以支持定时任务的注解实现 (一)在xml里加入task的命名空间 <!-- beans里添加:--> xmlns:task=" ...
- day 65 crm(2) admin源码解析,以及简单的仿造admin组件
前情提要: crm中的admin组件重写. 一:admin的autodiscover 作用:实现扫面该项目中的所有的admin 1:执行顺序-> 按照注册的顺序执行 二:单例模式 1:普通案例的 ...
- css之IE hack 方法[ IE6 - IE9]
ps: 由于近来需要研究IE下兼容问题,今天又再次翻起起这些针对IE的hack,于是决定写下这篇笔记,记录下这些本该献祭级浏览器下的处理方法,用于备忘 一.IE10以及以下版本均会生效(ie edge ...
- 快速排序的理解和实现(Java)
快速排序介绍 快速排序(Quick Sort)使用分治法策略,其基本思想是:通过一趟排序将待排序记录分割成独立的两部分,其中一部分记录的关键字均比另外一部分记录的关键字小,则可分别对这两部分记录继续进 ...
- 使用TopShelf做windows服务安装 ---安装参数解释
转自:https://topshelf.readthedocs.io/en/latest/overview/commandline.html Topshelf Command-Line Referen ...
- django框架--视图系统
目录 一.视图函数的理解 二.视图函数的定位 三.请求对象HttpRequest 四.响应对象HttpResponse 一.视图函数的理解 视图函数的作用是,对指定的url执行业务逻辑,视图函数将会作 ...
- 一款高效视频播放控件的设计思路(c# WPF版)
因工作的需要,开发了一款视频播放程序.期间也经历许多曲折,查阅了大量资料,经过了反复测试,终于圆满完成了任务. 我把开发过程中的一些思路.想法写下来,以期对后来者有所帮助. 视频播放的本质 就是连续的 ...