jquery常用特效方法使用示例


Posted in Javascript onApril 25, 2014

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);
});

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的执行速度
Jan 23 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
ES6数组的扩展详解
Apr 25 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
javascript实现存储hmtl字符串示例
Apr 25 #Javascript
javascript作用域和闭包使用详解
Apr 25 #Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 #Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 #Javascript
js动态移动滚动条至底部示例代码
Apr 24 #Javascript
javaScript如何处理从java后台返回的list
Apr 24 #Javascript
jquery如何扑捉回车键触发的事件
Apr 24 #Javascript
You might like
用PHP将数据导入到Foxmail
2006/10/09 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
PyTorch安装与基本使用详解
2020/08/31 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
python 装饰器重要在哪
2021/02/14 Python
怎样在程序里获得一个空指针
2015/01/24 面试题
什么是规则表达式
2012/05/03 面试题
工程师自我评价怎么写
2013/09/19 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
安全承诺书格式范本
2015/04/28 职场文书
推普标语口号大全
2015/12/26 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS