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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
js实现自定义右键菜单
May 18 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 中的批处理的实现
2007/06/14 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
教师演讲稿范文
2014/01/08 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
信仰观后感
2015/06/03 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android