企业网站展示补充用Jquery实现简单的动态变化效果

上一篇日志发布了一个企业网站源代码，这篇日志主要补充一下Jquery的相关知识，Jquery是一种与Protype类似Js开

发框架，而且很轻量化，深受广大像CG一样的程序员的喜爱，当然了用Jquery写出动态效果也是小菜一碟以下是CG

用jquery实现的简单的动态效果，大家看到之后不要觉得JS代码很复杂哦

下面是展示地址

http://www.lidaren.com/code/Jquery/Jquery1.htm

下面是源代码

$(document).ready(function(){

$("#box").animate({opacity: "0.1", left: "+=600"}, 1200)

.animate({opacity: "1", top: "+=300", height: "170", width: "300"}, "slow")

.animate({opacity: "0.1", left: "0", height: "170", width: "300"}, "slow")

.animate({opacity: "1", top: "0"}, "fast")

.animate({opacity: "1", top: "+=150", left: "+=300", height: "170", width: "300"}, "slow")

.animate({opacity: "0.1", height: "170", width: "300"}, "slow")

.animate({opacity: "1" , height: "170", width: "300"}, "slow")

.animate({opacity: "0.4", height: "170", width: "300"}, "slow")

.animate({opacity: "1", height: "170", width: "300"}, "slow")

.slideUp()

.slideDown("slow")

.animate({opacity: "0.1", height: "170", width: "300"}, "slow")

.animate({opacity: "1" , height: "170", width: "300"}, "slow")

.animate({opacity: "0.4", height: "170", width: "300"}, "slow")

.animate({opacity: "1", height: "170", width: "300"}, "slow")

return false;

});

简单的解释一下，Jquery对DOM对象的动态效果是定义了对象的animate方法来实现的，animate方法的参数比较多，第一个参数是对象从A状态到B状态的基本属性变化值，通常与CSS兼容，Jquery支持表达式计算功能，比如height:"+=300" 就是高度自增300，这种方式很方便代码的编写，第二个属性通常是控制变化的效果的，主要可用的值是 fast和slow，当然大家也可以用一个整数来表示变化的时间长度，这样控制更自由一点。下面是 .slideUp() .slideDown()这两个方法，效果是卷动效果，参数可以是fast和slow或者加时间控制，单位是毫秒，其他的还有.hidde()和.show(),看意思大家就明白，这里不详述
--------------------------------------------------------------------------------------
- 版权声明：
- 如在本页面内无特别说明，本文内容均为[李大仁博客]原创，本文版权归[李大仁博客]所有。
- 欢迎转载，转载请务必在文章页面明显位置提供原文链接并注明出处。欢迎您在转载本文时保留本段声明。
- 文章标题：[Jquery]企业网站展示补充用Jquery实现简单的动态变化效果
- 独立博客：李大仁博客
- 永久链接：http://www.lidaren.com/archives/469
--------------------------------------------------------------------------------------
以上内容由博客自动发布工具自动发布，最终显示内容和效果会与原文内容有所偏差，敬请谅解。