动画效果:

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的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  3. jquery animate函数实现

    jquery animate 函数 实现动画效果 参数一 比如高度宽度 之类的:'-=50' 参数二 速度之类 <html xmlns="http://www.w3.org/1999/ ...

  4. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

  5. jquery animate()背景色渐变的处理

    jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 gitHub地址:https://github.com/jquery/jquery-color/ 使用代码: ...

  6. jQuery animate方法开发极客标签Logo动画融合效果

    在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...

  7. jquery animate()方法 语法

    jquery animate()方法 语法 作用:animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创 ...

  8. jQuery animate easing使用方法

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  9. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  10. jquery animate 改变元素背景颜色

    通过animate不能直接设置css样式可以通过https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.j ...

随机推荐

  1. 使用Spring Boot,Spring Cloud和Docker实现微服务架构

    https://github.com/sqshq/PiggyMetrics     Microservice Architecture with Spring Boot, Spring Cloud a ...

  2. Android------------------的资源文件的学习

    一.style的学习 用法: 使用: 使用系统自带的style的风格 使用: 效果: 二.drawable的使用 selector是一个xml文件进行加载使用的: 文件名叫做buttonselecto ...

  3. *p++与(*p)++与*(p++)------自增运算符常见误区

    自增运算符(++) 自增\自减运算符分为前缀形(++a)和后缀形(a++),这里重点分析自增 大部分人对前缀和后缀的理解一般是,前缀形式是先++再使用(先变后用),后缀形式是先使用再++(先用后变) ...

  4. centos6安装最新syslog-ng推送hdfs

    可参考以下网址: installhttps://www.syslog-ng.com/community/b/blog/posts/latest-syslog-ng-available-rhel-6-c ...

  5. GCD 中使用 dispatch group 进行同步操作

    话不多说,先上代码,在分析 Code - (void)viewDidLoad { [super viewDidLoad]; dispatch_group_t group1 = dispatch_gro ...

  6. method swizzing

    原理 类的方法类别中,选择子的名称通过映射表找到应该调用的方法.如下所示:  OC 的运行时提供了几个方法可以操作这张表.可以向其中新增选择子,改变选择子的实现,或者交换选择子映射到的指针.  在 ...

  7. 使用sqlyog连接到服务器数据库,实现可视化数据操作。(完美解决版。)《亲测!!!!》

      服务器中的表 select Host ,User ,Select_priv ,Insert_priv ,Update_priv ,Delete_priv ,Create_priv ,Drop_pr ...

  8. ANR触发原理(what triggers ANR?)

    Ref: http://developer.android.com/training/articles/perf-anr.html http://stackoverflow.com/questions ...

  9. Mac下使用zsh不执行/etc/profile文件

    Mac下使用了zsh会不执行/etc/profile文件,当然,如果用原始的是会执行. 转而执行的是这两个文件,每次登陆都会执行: ~/.zshrc与/etc/zshenv与/etc/zshrc 所以 ...

  10. MySQL 5.7.14 win10安装

    1. 下载: http://dev.mysql.com/downloads/mysql/