jQuery制作动态酷效果整理总结

来源: 发布时间:星期六, 2009年12月26日浏览:0次评论:0

jQuery是个优秀JavaScript框架可以很好解决区别浏览器兼容问题尤其是在ASP.NET MVC下它作用更加凸显
jQuery在制作动态酷效果时候有很强优势以下是笔者整理总结些最常用到思路方法

1.修改内联CSS

jQyery提供.css思路方法来供我们获取或修改内联css

.css思路方法能够接收参数由两种种是为它单独传递个单独样式属性和值另种是为它传递个由“属性-值”对构成映射:

.css('property','value');

.css({'property1':'value1','property-2':'value2'});

般来说数字值不需要加引号而串值需要加引号但是当使用映射表示法时如果属性名使用驼峰大小写形式DOM表示法则可以省略引号

2.基本隐藏和显示不带动画效果

.hide

.show

这两个思路方法作用就是立即隐藏或显示匹配元素集合

3.指定显示速度隐藏和显示

在.hide和.show思路方法基础上可以制定隐藏或显示速度它表示思路方法为:.hide('speed')或.show('speed')speed值可以为:

slow、normal、fast；slow为0.6秒；normal为0.4秒；fast为0.2秒
数值表示毫秒数值

4.淡入淡出效果

.fadein 为匹配元素指定淡入效果

.fadeout 为匹配元素指定淡出效果

使用.fadein或.fadeout同样可以制定speed值如:slow、normal、fast、毫秒数

淡入淡出实现方式其实是增加或减少匹配元素不透明度来实现

5.制作动画效果

jQuery提供了个强大.animate思路方法通过该思路方法可以创建包含多重效果自定义动画.animate思路方法接受以下 4个参数:

个包含样式属性及值映射
可选速度参数默认为normal
可选缓动类型
可选回调参数
6.使用.animate制作动画时候应当考虑问题

css对我们要改变元素所施加限制例如在元素css定位没有设置成relative或absolute情况下调整left属性对于匹配元素毫无作用所有块级元素默认css定位属性都是这个值精切地表明:在改变元素定位属性的前试图移动它们它们只会保持静止不动

并发和排队效果 jQuery中无论是处理组还是多组元素默认都是同时发生因此并发问题就成为了我们值得考虑个问题概括起来有以下两点:

如果是处理组元素可以根据代码书序进行控制；

如果是处理多组元素则可以通过回调进行控制；

Untitled Page 作者:深山老林
出处:http://wlb.cnblogs.com/
本文版权归作者和博客园共有欢迎转载但未经作者同意必须保留此段声明且在文章页面明显位置给出原文连接否则保留追究法律责任权利