jQuery 动态酷效果实现总结


Posted in Javascript onDecember 27, 2009

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中无论是处理一组还是多组元素,默认都是同时发生的,因此,并发问题就成为了我们值得考虑的一个问题。概括起来有以下两点:
如果是处理一组元素,可以根据代码的书序进行控制;
如果是处理多组元素,则可以通过回调函数进行控制;

Javascript 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
angularJS 入门基础
Feb 09 Javascript
js实现网页抽奖实例
Aug 05 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
javascript 清空form表单中某种元素的值
Dec 26 #Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 #Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 #Javascript
jQuery 常见开发使用技巧总结
Dec 26 #Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 #Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 #Javascript
js tab效果的实现代码
Dec 26 #Javascript
You might like
PHP array_multisort()函数的使用札记
2011/07/03 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
基于jQuery实现瀑布流页面
2017/04/11 jQuery
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
pandas 数据类型转换的实现
2020/12/29 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
工业学校毕业生自荐书
2014/01/03 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
大学生见习报告总结
2014/11/04 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
图神经网络GNN算法
2022/05/11 Python
pandas中pd.groupby()的用法详解
2022/06/16 Python