当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery 动态酷效果实现总结

Javascript
document.createElement()用法及注意事项
Javascript教程:关于内存泄漏问题
延迟事件为0的setTimeout的真正目的
JavaScript图片特效代码下载
AJAX初学:IE缓存页面的问题
AJAX中DOM的操作方法
AJAX中文乱码的两类问题
javascript程序的执行效率问题
网页用户注册界面的设计
ajax应该如何应用?
详解Javascript匿名函数的使用
Ajax:研究密码强度规则(仿google)
JavaScript学习教程
网页制作中常用的Javascript代码
深入学习Javascript函数
JS的Object类的属性和方法
Javascript初学者实例教程(1):简单交互
Javascript初学者实例教程(2):event对象和事件
Javascript初学者实例教程(3):数组和slice()方法
Javascript初学者实例教程(4):对象和构造方法

Javascript 中的 jQuery 动态酷效果实现总结


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 250 ::
收藏到网摘: n/a

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()方法接受以下四个参数:
一个包含样式属性及值的映射。
可选的速度参数,默认为normal。
可选的缓动类型
可选的回调参数。
6.使用.animate()制作动画的时候应当考虑的问题
css对我们要改变的元素所施加的限制
例如,在元素的css定位没有设置成relative或absolute的情况下,调整left属性对于匹配的元素毫无作用。所有块级元素默认的css定位属性都是static,这个值精切地表明:在改变元素的定位属性之前试图移动它们,它们只会保持静止不动。
并发与排队效果
jQuery中无论是处理一组还是多组元素,默认都是同时发生的,因此,并发问题就成为了我们值得考虑的一个问题。概括起来有以下两点:
如果是处理一组元素,可以根据代码的书序进行控制;
如果是处理多组元素,则可以通过回调函数进行控制;