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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
JavaScript实现显示和隐藏图片
Apr 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
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
8种常用的Python工具
2020/08/05 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
美德好少年主要事迹
2014/01/29 职场文书
领导接待方案
2014/03/13 职场文书
交通安全标语
2014/06/06 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
小学家长意见怎么写
2015/06/03 职场文书