jQuery一些常用特效方法使用实例
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);
jQuery一些常用特效方法使用实例的更多相关文章
- [总结]jQuery之常用函数方法参考手册
w3school参考地址:http://www.w3school.com.cn/jquery/index.asp runoob参考地址:http://www.runoob.com/jquery/jqu ...
- jquery中动画特效方法
基本特效 方法: 说明 .show() 显示选中的元素 .hide() 隐藏选中的元素 .toggle() ...
- Jquery一些常用的方法
整理以前的笔记,在学习JavaScript时候,经常会用到一些方法,但是有时忘掉了具体用法,因此记下.方便以后查阅. 这篇博文先说明这些方法的用途: removeClass().remove().cs ...
- jquery中常用的方法和注意点
1.通过js获取url中的参数值 //通过参数名称name获取url参数function GetQueryString(name) { var reg = new RegExp("(^|&a ...
- jquery,js常用特效名称
- JS常用特效方法总结
1.按Ctrl提交 <body onkeydown="if(event.ctrlKey&&event.keyCode=='13') form1.submit.click ...
- JS常用数组方法及实例
1.join(separator):将数组的元素组起一个字符串,以separator为分隔符 ,,,,]; var b = a.join("|"); //如果不用分隔符,默认逗号隔 ...
- Jquery的常用使用方法
1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']: ...
- jQuery常用工具方法
前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...
随机推荐
- js8月-4号,,思想
1.js使用观察者模式,做异步编程.面向事件编程. 2.事件执行 (1)用户触发事件(2)定时执行 作业:选项卡,导航栏.
- delphi 连接MYSQL 的方法
需要的控件:(view as form) 1.SQLConnection1: TSQLConnection ConnectionName = 'MYSQLCONNECTION' DriverName ...
- SSM框架
1.http://www.cnblogs.com/verlen11/p/5349747.html 2.Mybatis http://www.cnblogs.com/xdp-gacl/p/4261895 ...
- C#和.NET版本
1999年,就听说微软公司在研发一种名为“cool”的新开发语言,而具体内幕一直是个谜,直到2000年6月26日微软在奥兰多举行的“职业开发人员技术大会”(PDC 2000)上,这个谜底终于揭晓了,这 ...
- 3.css中的颜色
css中颜色的设置形式主要有三种方式:颜色名称.十六进制代码和十进制代码. 在古老的 HTML4 时,颜色名称只有 16 种. 颜色名称 十六进制代码 十进制代码 含义 black #000000 ...
- [terry笔记]Flashback
flashback 闪回,主要功能有两个:闪回查询(flashback query).闪回恢复(flashback table/database) 开启闪回flashback功能(归档下才可开启数据库 ...
- Python核心编程--学习笔记--1--Python简介
本章介绍了Python的背景知识,包括什么是Python.Python的起源以及Python的一些关键特性. 1 什么是Python Python是一门优雅而健壮的编程语言,它继承了传统编译语言的强大 ...
- MySQL 出现 Access denied for user 'root'@'localhost' (using password: YES) 错误
登录某台服务器的mysql时候总报错: mysql2/client.rb:58:in `connect': Access denied for user 'root'@'localhost' (usi ...
- 时隔一年,window.scroll
function scrollToTop() { return function(btn, input) { var flag = false; var timer; function autoScr ...
- Telerik XML 数据源绑定的问题
Telerik GridView 默认的 XElement 数据源的直接绑定,会导致内置的sort, filter ,group等功能无法使用. 原因在于Telerik GridView的那些功能是根 ...