龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

从零开始学习jQuery之让页面动起来(1)(3)

时间:2013-03-06 14:58来源:未知 作者:admin 点击: 次
分享到：
五.自定义动画函数 上面三个渐变动画函数已经基本满足了我们日常需求. 但是如果我们一定要创建自己的特殊的效果, jQuery也为我们提供了相关函数. 自定

五.自定义动画函数

上面三个渐变动画函数已经基本满足了我们日常需求. 但是如果我们一定要创建自己的特殊的效果, jQuery也为我们提供了相关函数.

自定义动画函数 Custom

名称 说明 举例
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。

 点击按钮后div元素的几个不同属性一同变化:
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
animate( params, options ) 用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

 第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体，一旦字体改变完毕后，边框的动画才开始:

$("#go1").click(function(){ $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); $("#go2").click(function(){ $("#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); });
stop( [clearQueue], [gotoEnd] ) 停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行


clearQueue(Boolean):如果设置成true，则清空队列。可以立即结束动画。

gotoEnd (Boolean):让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

 点击Go之后开始动画,点Stop之后会在当前位置停下来:

// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});

// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});

参数说明

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中新增)

讲解

自定义动画属于高级应用, 在这里我暂时无法做详细的讲解.下面通过两个示例让大家简单了解如何使用自定义动画.

Bug提示: 下面两个示例使用vsdoc2智能提示版本的jQuery类库在FireFox下存在透明度无法渐变的问题. 请使用其他版本.

自定义坠落动画:

这个示例让一个图层从屏幕最上方掉落到最下方, 并且消失.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>jQuery Animation - fadeTo </title>  
  5.  
  6.     <script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>  
  7.  
  8.     <script type="text/javascript">  
  9.         $(document).ready(function()  
  10.         {  
  11.             $("#divPop")  
  12.             .animate(  
  13.             {  
  14.                 "opacity": "hide",  
  15.                 "top": $(window).height() - $("#divPop").height() - $("#divPop").position().top  
  16.             },  
  17.             600,  
  18.             function() { $("#divPop").hide(); }  
  19.             );  
  20.         });  
  21.     </script>  
  22.  
  23. </head>  
  24. <body>         
  25.     <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000;   
  26.         width: 300px; height: 100px; position:absolute;">  
  27.         <div style="text-align: center;">弹出层</div>  
  28.     </div>  
  29. </body>  
  30. </html> 

自定义消散动画:

这个示例让一个div越来越大最后消失:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>jQuery Animation - fadeTo </title>  
  5.  
  6.     <script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>  
  7.  
  8.     <script type="text/javascript">  
  9.         $(document).ready(function()  
  10.         {  
  11.             $("#divPop")  
  12.             .animate(  
  13.             {  
  14.                 "opacity": "hide",  
  15.                 "width": $(window).width()-100 ,  
  16.                 "height": $(window).height()-100  
  17.             },  
  18.             500  
  19.             );  
  20.         });  
  21.     </script>  
  22.  
  23. </head>  
  24. <body>         
  25.     <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000;   
  26.         width: 300px; height: 100px; position:absolute;">  
  27.         <div style="text-align: center;">弹出层</div>  
  28.     </div>  
  29. </body>  
  30. </html> 

六. 全局控制属性

最后讲一下和动画相关的属性:

名称: jQuery.fx.off

返回值: Boolean

说明:

关闭页面上所有的动画。

讲解:

把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如：

* 你在配置比较低的电脑上使用jQuery。

* 你的一些用户由于动画效果而遇到了 可访问性问题

当把这个属性设成false之后，可以重新开启所有动画。

比如下面的代码会执行一个禁用的动画:

  1. jQuery.fx.off = true;  
  2. $("#divPop").show(1000); 

虽然使用了动画效果的show函数, 但是因为关闭了所有动画, 所以div会立刻显示出来而没有渐变效果.

代码下载

精彩图集
node+express+ejs制作简单页面上手指南_node.js
node+express+
js点亮星星评分并获取参数的js代码
js点亮星星评
鼠标滑过出现预览的大图提示效果
鼠标滑过出
查找Oracle高消耗语句的方法
查找Oracle高
PHP开发者必须掌握的6个关键字
PHP开发者必

热门标签

误删表 幻灯片 踢出用户 天猫商品 数据排序 get_transien 访问 re模块 GraphicsMagi HandlerSocke 文件夹大小 HAVING返回空 字符串函数 mk文件 delet discuz同步登录 打包短信 双向关联 sybase_fetch 定时任务 CSimpleList js实现日历 INSERTED 应用技巧 找不到IP route命令 密码爆破 2014 cloud 发布项目 blob 重复触 批量删除BOM头 URL部署问 #include 阅读 读写sd卡 代 JQueryJcrop php php 计 时 片段 震动 mysqlimport Ucenter 多行查询 mysql主从复制 GET方法 RCLS.vbs使用帮助 2012 中文参数乱码 NAMES FirePHP 获取 EXE2BAT 远程下载 文件传输 代码优化 浏览器窗口 函数对象

赞助商链接