jQuery animate效果演示- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery animate效果演示

Javascript: 滚动条代码生成器; NiftyCube：轻松实现圆角边框; 懒就要懒到底：鼠标自动点击（含时间判断）; 简单form标准化实例：语义结构; 超清晰的document对象详解; 用正则获取指定路径文件的名称; 整理的比较不错的JavaScript的方法和技巧; 求得div 下 img的src地址的js代码; js+css实现的仿office2003界面; 一个不错的应用,用于提交获取文章内容，不推荐用; 插件：检测javascript的内存泄漏; 得到文本框选中的文字，动态插入文字的js代码; 翻译整理的jQuery使用查询手册; 一个的简易文本编辑器源码; HTML中不支持静态Expando的元素的问题; 用CSS打造多彩文字链接; 一个不错的用JavaScript实现的UBB编码函数; js实现的非常棒的绿色下拉透明菜单; 优秀js开源框架-jQuery使用手册(1); 学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例

No. « ‹ 193 194 195 196 › »

技术文章搜索

关键字

Javascript 中的 jQuery animate效果演示

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 189 ::

收藏到网摘: n/a

XmlUtils JS操作XML工具类 Jquery 设置标题的自动翻转

一个简单的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="/upload/tech/20091012/20091012100825_0e65972dce68dad4d52d063967f0a705.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 全选提示:你可先修改部分代码,再按运行]

XmlUtils JS操作XML工具类 Jquery 设置标题的自动翻转

Javascript 中的 jQuery animate效果演示

评论 (0) All