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读取ASP设定的COOKIE
Nov 24 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
js中replace的用法总结
Dec 27 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
bootstrap表单示例代码分享
May 18 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
微信小程序开发实现消息推送
Nov 18 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实现批量生成App各种尺寸Logo
2015/03/19 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
XML的代替者----JSON
2007/07/21 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
JavaScript中Object值合并方法详解
2017/12/22 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
python关键字and和or用法实例
2015/05/28 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
判断网页编码的方法python版
2016/08/12 Python
浅析python协程相关概念
2018/01/20 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
python实现猜数字小游戏
2020/03/24 Python
python使用turtle绘制分形树
2018/06/22 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
生日派对邀请函
2014/01/13 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
英语导游欢迎词
2015/09/30 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技