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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
js实现3d悬浮效果
Feb 16 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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优化那些事(经验分享)
2014/11/27 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
Three.js学习之网格
2016/08/10 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Random 在 Python 中的使用方法
2018/08/09 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
python读取xml文件方法解析
2020/08/04 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
高一地理教学工作总结
2015/08/12 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS