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 相关文章推荐
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 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中使用Oracle数据库(6)
2006/10/09 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
JS自定义滚动条效果
2020/03/13 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
python识别验证码的思路及解决方案
2020/09/13 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
促销活动总结报告
2014/04/26 职场文书
奠基仪式策划方案
2014/05/15 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
统计工作个人总结
2015/03/03 职场文书
导游词之太原天龙山
2020/01/02 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL