jquery必须知道的一些常用特效方法及使用示例(整理)


Posted in Javascript onJune 24, 2013

1.jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
实例:

$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000);});

2.jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);

3.jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
实例:

$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000);});

这里我想说一般jquery他都有取反可逆的方法来实现单个方法的综合。下面的那个上移动和下移动也如此。

4.语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。实例

$("button").click(function(){ 
$("#div1").fadeTo("slow",0.15); 
$("#div2").fadeTo("slow",0.4); 
$("#div3").fadeTo("slow",0.7); 
});

5.jQuery slideDown() 方法用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
$("#flip").click(function(){ $("#panel").slideDown();});

6.jQuery slideUp() 方法用于向上滑动元素。
语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

7.jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);

8.jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
也可以定义一组animate,实现队列功能。
下面的例子演示 animate() 方法的简单应用;它把 <div> 元素移动到左边,直到 left 属性等于 250 像素为止:
实例

$("button").click(function(){ $("div").animate({left:'250px'});});

9.jQuery stop()方法用于停止动画或效果,在它们完成之前

10.当动画 100% 完成后,即调用 Callback 函数。
典型的语法:
$(selector).hide(speed,callback)

11.jQuery 方法链接
有些元素只要获取一遍就可以,所以可以利用链接对方法追加。
就是方法点方法。如
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

Javascript 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
javascript时间函数大全
Jun 30 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 #Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 #Javascript
JS localStorage实现本地缓存的方法
Jun 22 #Javascript
js获取某月的最后一天日期的简单实例
Jun 22 #Javascript
js遍历、动态的添加数据的小例子
Jun 22 #Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 #Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 #Javascript
You might like
php与paypal整合方法
2010/11/28 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
JS实现简易留言板特效
2019/12/23 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
python海龟绘图实例教程
2014/07/24 Python
跟老齐学Python之集合(set)
2014/09/24 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
python getopt详解及简单实例
2016/12/30 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
Python的UTC时间转换讲解
2019/02/26 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
今冬明春火灾防控工作方案
2014/05/29 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
高中物理教学反思
2016/02/19 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js
TypeScript 内置高级类型编程示例
2022/09/23 Javascript