动画效果:

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. MYsql 之多表查询.

    http://www.cnblogs.com/wangfengming/articles/8067220.html

  2. 201621123018《Java程序设计》第1周学习报告

    1.<Java程序设计>第1周学习报告 1.本周学习报告 关键字:Java的发展.Java语言的特点.JDK.JRE.JVE.Java开发工具.Java环境配置.Java是一种面向对象的程 ...

  3. Axure学习了解

    我这次介绍的原型设计工具为Axure 一.区域介绍 这是主界面: 左上区域显示原型的各个界面,可以添加新界面: 左中包含各种原型设计所包含的组件,例如文本框,图片等: 左下是各种模板,模板由自己设计, ...

  4. 在Load average 高的情况下如何鉴别系统瓶颈

    在Load average 高的情况下如何鉴别系统瓶颈.是CPU不足,还是io不够快造成? 或是内存不足? 一:查看系统负载vmstat procs -----------memory-------- ...

  5. 【小程序云开发入门】quickStart

    开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现 ...

  6. centos 7 初始化脚本

    #!/bin/bash # 时间: 2018-11-21 # 作者: HuYuan # 描述: CentOS 7 初始化脚本 # 加载配置文件 if [ -n "${1}" ];t ...

  7. SAS->关联分析实践

    SAS系统被誉为国际上的标准软件系统,本文将详细介绍如何在SAS/EM模块中进行关联规则数据挖掘,使用的软件版本是SAS 9.1.3下的Enterprise Miner 4.3: 从SAS顶端的[解决 ...

  8. Storm原理及安装

    http://my.oschina.net/leejun2005/blog/147607 http://www.storm-geek.com/forum.php http://www.zhangjih ...

  9. Apache版本hadoop-2.6.0.tar.gz平台下搭建Hue

    不多说,直接上干货! http://archive.apache.org/dist/ http://www.cnblogs.com/smartloli/p/4527168.html http://ww ...

  10. Fiddler Web Debugger安装后与浏览器之间的常用设置(辅助爬虫)(图文详解)

    不多说,直接上干货! 怎么让我们的浏览经过代理服务呢?如下来正确设置: 这里有个经验,最好用历史低版本的火狐浏览器.比如 http://ftp.mozilla.org/pub/firefox/rele ...