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 相关文章推荐
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
解析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
咖啡的植物学知识
2021/03/03 咖啡文化
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python编程实现蚁群算法详解
2017/11/13 Python
python 实现敏感词过滤的方法
2019/01/21 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
社会实践心得体会
2014/01/03 职场文书
英语系毕业生求职信
2014/07/13 职场文书
销售团队获奖感言
2014/08/14 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
社区植树节活动总结
2015/02/06 职场文书
公司停电通知
2015/04/15 职场文书
检讨书之工作不认真
2019/08/14 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
golang 实现Location跳转方式
2021/05/02 Golang
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang