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 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
javascript中expression的用法整理
May 13 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
理解Python中的With语句
2016/03/18 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Python删除n行后的其他行方法
2019/01/28 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
Hibernate持久层技术
2013/12/16 面试题
会计电算化专业应届大学生求职信
2013/10/22 职场文书
小班评语大全
2014/05/04 职场文书
设计师求职信
2014/07/01 职场文书
社区娱乐活动方案
2014/08/21 职场文书
会计人员演讲稿
2014/09/11 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
同事去世追悼词
2015/06/23 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers