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 相关文章推荐
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
微信小程序实现签到弹窗动画
2020/09/21 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
财务主管自我鉴定
2014/01/17 职场文书
阳光体育活动方案
2014/02/16 职场文书
公司贷款承诺书
2014/05/30 职场文书
服务行业演讲稿
2014/09/02 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
创业计划书之花店
2019/09/20 职场文书