jQuery animate效果演示

更新时间：2009年10月03日 01:59:45 作者：

一个简单的animate函数尝试，这个效果在web应用中非常的实用，提供大家参考！

animate(params[,duration[,easing[,callback]]])
    用于创建自定义动画的函数。<br />
    这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
    注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
    而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

运行以后，刷新下，主要远程js文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js"></script> <title>FV.Zone jQuery demos...</title> <script type="text/javascript"> $(document).ready(function(){ $(".box h3").toggle(function(){ $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");          $(this).addClass("arrow");          return false; },function(){          $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");          $(this).removeClass("arrow");          return false; }); }); </script> <style> /* 初始化样式 */ div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;} h1,h2,h3,h4,h5,h6 { margin:0; padding:0;} h1 { margin: 42px 0 20px; font-size: 18px; text-align: center; } .clear { clear: both; } a { color:#000; text-decoration: none; } a:hover { color:#999; text-decoration: none; } body {     margin: 0 auto;     width: 960px;     background: #282c2f;     color: #d1d9dc;     font: 12px 'Lucida Grande', Verdana, sans-serif; } #layout {     margin: 0 auto;     width: 280px;     } .text {     line-height: 22px;     padding: 0 6px;     color:#666; } .box h3 {     font-size: 12px;     padding-left: 6px;     line-height: 22px;     background: #99CC00 url(arrow.gif) no-repeat right -17px;     font-weight:bold;     color:#fff;     border: 1px solid #669900;     height:22px; } .arrow {     background: #99CC00 url(arrow.gif) no-repeat right 5px; } .box h3 a { color:#fff; } .box h3 a:hover { color:#eee; } .box {     position: relative;     background: #363C41;     border: 5px solid #4A5055; } .ar {     line-height: 22px;     position: absolute;     top: 3px;     right: 6px;     display: block;     width: 16px;     height: 16px; } </style> </head> <body> <h1>jQuery demos animate(params[,duration[,easing[,callback]]])</h1> <div id="layout"> <div class="box"> <h3><span>fdsfds<a href="#" class="ar"></a></span></h3>     <div class="text">     animate(params[,duration[,easing[,callback]]])     用于创建自定义动画的函数。     这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如"height"、"top"或"opacity"）。          注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.               而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是"hide"、"show"或"toggle"这样的字符串值，则会为该属性调用默认的动画形式。     </div> </div>  <div class="box"> <h3>fdsfds<a href="#" class="ar"></a></h3>     <div class="text">     在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。     </div> </div> </div>  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

jQuery中的ready函数与window.onload谁先执行
这篇文章主要介绍了jquery中ready函数与window.onload函数的区别，别讲解了他们各自执行的时机，通俗易懂，需要的朋友可以参考下。
2016-06-06
jquery实现的美女拼图游戏实例
这篇文章主要介绍了jquery实现的美女拼图游戏,实例分析了jQuery操作图片的相关技巧,需要的朋友可以参考下
2015-05-05
jquery $.ajax相关用法分享
jquery $.ajax相关用法分享，使用jquery的朋友可以参考下
2012-03-03
jQuery获得包含margin的outerWidth和outerHeight的方法
这篇文章主要介绍了jQuery获得包含margin的outerWidth和outerHeight的方法,涉及jQuery中outerWidth及outerHeight方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
jQuery+CSS3折叠卡片式下拉列表框实现效果
这是一款使用jQuery和CSS3制作的效果非常炫酷的折叠卡片式下拉列表框特效，感兴趣的小伙伴们可以参考一下
2015-11-11
jQuery实现的表格展开伸缩效果实例
这篇文章主要介绍了jQuery实现的表格展开伸缩效果,结合完整实例形式分析了jQuery响应鼠标事件动态修改页面元素的相关技巧,需要的朋友可以参考下
2016-09-09
在次封装easyui-Dialog插件实现代码
在次封装easyui-Dialog插件实现代码，需要的朋友可以参考下。
2010-11-11
14款经典网页图片和文字特效的jQuery插件-前端开发必备
最近没项目做，在网上看到很多网页特效，非常漂亮，于是就整理了14款经典网页图片和文字特效的jQuery插件，有助于在项目需求中用到，前端开发必备，大家都来学习下吧
2015-08-08
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
jQuery1.3.2 升级到 1.4.4 ，需要修改的地方，需要的朋友可以参考下。
2011-01-01
jQuery on()绑定动态元素出现的问题小结
jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件，通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结，需要的朋友参考下
2016-02-02