基本动画函数

 $("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();

toggle()表示切换匹配目标事件的状态,可以无参数,也可以设置动画速度参数,单位毫秒。也可以输入字符串"slow", "normal", or "fast"。


  • 滑动动画函数


  • 淡入淡出动画函数

fadeTo函数只改变对象的透明度,即使透明度为 0 对象仍然占位。而fadeInfadeOut最后一定会改变对象的display属性,fadeOut后对象将从页面上消失(不占位),但是fadeTo仅仅是让其透明(占位)。


  • 自定义动画函数

1.params(可选)

类型:Options

说明:一组包含作为动画属性和终值的样式属性和及其值的集合.

讲解:通过把元素的样式属性值,从当前值逐渐调整到 params 设置的值而产生动画效果.

2.duration(可选)

类型:String,Number

说明:三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值(如:1000)

讲解:动画效果持续的时间, 时间越长则变得越慢. 如果省略则不会产生动画.

3.easing(可选)

类型:String

说明:要使用的擦除效果的名称(需要插件支持).默认 jQuery 提供"linear" 和 "swing".

讲解:为了让元素逐渐达到 params 设置的最终效果,我们需要有一个函数来实现渐变, 这类函数就叫做 easing 函数.但是需要这里传递的只是 easing 函数名称, 使用前需要先将 easing 函数注册到 jQuery 上.

4.options 参数

类型:Options

说明:一组包含动画选项的值的集合。

讲解:所支持的属性如下:

  • duration: 与上面的 duration 参数相同
  • easing: 与上面的 easing 参数相同
  • complete :类型为 Function, 在动画完成时执行的函数
  • step: Callback
  • queue (Boolean): (默认值: true) 设定为 false 将使此动画不进入动画队列 (jQuery 1.2 中新增)

实例一:让一个图层从屏幕最上方掉落到最下方, 并且消失。

 <!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<title>jQuery Animation - fadeTo </title>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
$("#divPop").animate(
{
"opacity": "hide",
"top": $(window).height() - $("#divPop").height() - $("#divPop").position().top
},
600,
function() { $("#divPop").hide(); }
);
});
</script>
</head>
<body>
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; width: 300px; height: 100px; position:absolute;">
<div style="text-align: center;">pop div</div>
</div>
</body>
</html>

实例二:这个示例让一个 div 越来越大,最后消失。

 <!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<title>jQuery Animation - fadeTo </title>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
$("#divPop").animate(
{
"opacity": "hide",
"width": $(window).width()-100 ,
"height": $(window).height()-100
},
500
);
});
</script>
</head>
<body>
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; width: 300px; height: 100px; position:absolute;">
<div style="text-align: center;">pop div</div>
</div>
</body>
</html>

animate函数关键在于在params参数中设置css参数最终状态,系统自动按照参数递增来显示动画。opacity设置最后是隐藏还是显示。

三点注意的地方:

1.如果尺寸没有单位,那么默认单位是px。
2.属性值需要用双引号包裹,如果属性值是数字的话可以省略。
3.类似font-size或者background-color这样的属性需要变成驼峰式写法。fontSize


  • 全局控制属性

名称: jQuery.fx.off

返回值: Boolean

说明:

关闭页面上所有的动画。

讲解:

把这个属性设置为 true 可以立即关闭所有动画(所有效果会立即执行完毕)。

4月13日学习笔记——jQuery动画的更多相关文章

  1. 4月13日学习笔记——jQuery工具函数

    浏览器及特性检测 jQuery.support.boxModel 如果这个页面和浏览器是以 W3C CSS 盒式模型来渲染的,则等于 true.通常在 IE 6 和 IE 7 的怪癖模式中这个值是 f ...

  2. 4月12日学习笔记——jQuery事件

    下面是在 jQuery 中最常使用的 bind()方法举例:$("#testDiv4").bind("click", showMsg); 我们为 id 是 te ...

  3. 4月12日学习笔记——jQuery操作属性和样式

    区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus ...

  4. 4月12日学习笔记——jQuery管理包装集

    创建新的元素 (1)使用 HTML DOM 创建元素 //使用 Dom 标准创建元素 var select = document.createElement("select"); ...

  5. 4月10日学习笔记——jQuery选择器

    概念 jQuery 是一套Javascript脚本库,注意 jQuery 是脚本库,而不是脚本框架."库"不等于"框架".jQuery 并不能帮助我们解决脚本的 ...

  6. 4月8日学习笔记(js基础)

    <script>标签放在<body>和<head> 放在 <head></head> 里的会比放在 <body></bod ...

  7. 4月1日学习笔记(CSS基础)

    CSS初始化 内边距padding padding属性宽度是按照上右下左的顺序来的,否则单独设置就是padding-left... 边框border border可以设置样式(border-style ...

  8. 3月31日学习笔记(HTML基础)

    HTML标签和元素概念区别 <p>是标签,<p>内容</p>是HTML元素. <pre></pre>定义预格式化文本,多用来显示源代码. 表 ...

  9. 3月31日学习笔记(CSS基础)

    背景属性 文本属性 direction 属性影响块级元素中文本的书写方向.表中列布局的方向.内容水平填充其元素框的方向.以及两端对齐元素中最后一行的位置. 注释:对于行内元素,只有当 unicode- ...

随机推荐

  1. java生成汉字验证码

    java实现的汉字输入验证码,主要包含两个类,一个是生成验证码,一个是判断验证码输入是否正确,实现原理非常简单,将汉字和干扰线生成图片并将汉字保存到session,前台获取每次生成验证码图片并用文本框 ...

  2. iOS开发——高级UI—OC篇&退出键盘

    退出键盘 iOS开发中键盘的退出方法用很多中我们应该在合适的地方使用合适的方法才能更好的提高开发的效率和应用的性能 下面给大家介绍几种最常用的键盘退出方法,基本上iOS开发中的键盘退出方法都是这几种中 ...

  3. python time模块详解(转)

    python 的内嵌time模板翻译及说明  一.简介   time模块提供各种操作时间的函数  说明:一般有两种表示时间的方式:       第一种是时间戳的方式(相对于1970.1.1 00:00 ...

  4. 清除SQL Server 2008中登陆时的历史记录

    win7 在地址栏直接输入下面路径,删除SqlStudio.bin文件%AppData%\Microsoft\Microsoft SQL Server\100\Tools\Shell

  5. 剑指 offer set 5 二进制中 1 的个数

    总结 1. 负数右移会保持其符号. 比如 0x80000000 右移, 其对应的绝对值也是 0X80000000, 其右移一位并保持符号, 得到 0XC0000000. 符号位保持, 使得负数永远都无 ...

  6. innobackupex 备份实验

    [root@localhost ~]# xtrabackup -v xtrabackup version based Linux (x86_64) (revision id: 45cda89) [ro ...

  7. 基于jquery的侧边栏分享导航

    今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  8. Spring源码解析之:Spring Security启动细节和工作模式--转载

    原文地址:http://blog.csdn.net/bluishglc/article/details/12709557 Spring-Security的启动加载细节   Spring-Securit ...

  9. No saved view state could be found for the view identifier

    解决方法: javax.faces.application.ViewExpiredException:No saved view state could be found for the view i ...

  10. iOS篇之有沙盒缓存

    内存指的就是主板上的存储部件,是CPU直接与之沟通,并用其存储数据的部件,存放当前正在使用的(即执行中)的数据和程序,它的物理实质就是一组或多组具备数据输入输出和数据存储功能的集成电路,内存只用于暂时 ...