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

Javascript
JavaScript 解析Json字符串的性能比较分析代码
js 日期字符串截取分割成单个具体的日期(2009-12-30 13:28:29)
javascript 倒计时代码
javascript 语法基础 想学习js的朋友可以看看
javascript获取元素文本内容的通用函数
javascript 动态设置已知select的option的value值的代码
jquery 简单的图片展示效果
js textarea自动增高并隐藏滚动条
Javascript 中介者模式实例
textbox 在光标位置插入字符功能的js实现(兼容ie,firefox)
jQuery Attributes(属性)的使用(二、类篇)
Javascript document.referrer判断访客来源网址
[原创]javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]
javascript获得光标所在的文本框(text/textarea)中的位置
event.srcElement 用法笔记e.target
javascript 导出数据到Excel(处理table中的元素)
javascript DOM操作之动态删除TABLE多行
Javascript在IE或Firefox下获取鼠标位置的代码
Javascript 多浏览器兼容性问题及解决方案
让div层随鼠标移动的实现代码 ie ff

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 49 ::
收藏到网摘: 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中无论是处理一组还是多组元素,默认都是同时发生的,因此,并发问题就成为了我们值得考虑的一个问题。概括起来有以下两点:
如果是处理一组元素,可以根据代码的书序进行控制;
如果是处理多组元素,则可以通过回调函数进行控制;