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 UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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
15种PHP Encoder的比较
2007/04/17 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
javascript中数组中求最大值示例代码
2013/12/18 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
在cmd中查看python的安装路径方法
2019/07/03 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
python实现横向拼接图片
2020/03/23 Python
python和go语言的区别是什么
2020/07/20 Python
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
电子商务个人自荐信
2013/12/12 职场文书
《胡杨》教学反思
2014/02/16 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
优秀教师个人材料
2014/12/15 职场文书
工作保证书怎么写
2015/02/28 职场文书
会议简讯范文
2015/07/20 职场文书
python 提取html文本的方法
2021/05/20 Python