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 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
使用JavaScript通过前端发送电子邮件
May 22 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记录和读取JSON格式日志文件
2016/07/07 PHP
php compact 通过变量创建数组
2016/11/15 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
vant实现购物车功能
2020/06/29 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
python队列queue模块详解
2018/04/27 Python
python的pip安装以及使用教程
2018/09/18 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
为什么说python适合写爬虫
2020/06/11 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
疾病防治方案
2014/05/31 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
刑事代理授权委托书
2014/09/17 职场文书
文明家庭事迹材料
2014/12/20 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
python中的3种定义类方法
2021/11/27 Python