jQuery 效果

1.隐藏，显示

　1.1显示 hide() 和隐藏 show()　

　　语法：$(selector).hide(speed,callback);

　　　　　$(selector).show(speed,callback);

　　例：<p>内容</p>
　　　　<button id="hide">隐藏</button>
　　　　<button id="show">显示</button>　　　　

　　　　$(document).ready(function(){
　　　　　　$("#hide").click(function(){
　　　　　　　　$("p").hide();
　　　　　　});
　　　　　　$("#show").click(function(){
　　　　　　　　$("p").show();
　　　　　　});
　　　　});

　　可选的 speed 参数规定显示的速度和隐藏方式，可以取以下值：速度可以取"fast" 或毫秒，隐藏可以选择"slow"、"linear" 等。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

　　例：<div>隐藏及设置回调函数</div>

　　　　<button class="hidebtn">隐藏</button>

　　　　$(document).ready(function(){
　　　　　　$(".hidebtn").click(function(){
　　　　　　　　$("div").hide(1000,"linear",function(){
　　　　　　　　　　alert("Hide() 方法已完成!");
　　　　　　　　);
　　　　　　});
　　　　});

　1.2 切换 toggle()

　　语法: $(selector).toggle(speed,callback);

　　可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素。

　　例：<button>隐藏/显示</button>

　　　　<p>内容</p>　　　　

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("p").toggle();
　　　　　　});
　　　　});

　　可选的 speed 参数规定显示的速度和隐藏方式，可以取以下值：速度可以取"fast" 或毫秒，隐藏可以选择"slow"、"linear" 等。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。　　　　

　　例：<div>隐藏及设置回调函数</div>
　　　　<button class="hidebtn">隐藏或显示</button>　　

　　　　$(document).ready(function(){
　　　　　　$(".hidebtn").click(function(){
　　　　　　　　$("div").toggle(1000,"linear",function(){
　　　　　　　　　　alert("toggle() 方法已完成!");
　　　　　　　　});
　　　　　　});
　　　　});

2.淡入淡出 (jQuery 拥有下面四种 fade 方法)

　2.1 淡入已隐藏的元素fadeIn()  注意，fadeIn这里的I,是i的大写，不是L

　　语法: $(selector).fadeIn(speed,callback);

　　例：<button>点击淡入 div 元素。</button>

　　　　<br><br>
　　　　<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
　　　　<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
　　　　<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>　　　　

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("#div1").fadeIn();
　　　　　　　　$("#div2").fadeIn("slow");
　　　　　　　　$("#div3").fadeIn(3000);
　　　　　　});
　　　　});

　2.2 淡出可见元素fadeOut()

　　语法:$(selector).fadeOut(speed,callback);　

　　例：<button>点击淡出 div 元素。</button>
　　　　<br><br>
　　　　<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
　　　　<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
　　　　<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("#div1").fadeOut();
　　　　　　　　$("#div2").fadeOut("slow");
　　　　　　　　$("#div3").fadeOut(3000);
　　　　　　});
　　　　});

　2.3 切换淡入、淡出 fadeToggle() 

　　语法:$(selector).fadeToggle(speed,callback);　　

　　例：<button>点击淡入/淡出</button>
　　　　<br><br>
　　　　<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
　　　　<br>
　　　　<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
　　　　<br>
　　　　<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("#div1").fadeToggle();
　　　　　　　　$("#div2").fadeToggle("slow");
　　　　　　　　$("#div3").fadeToggle(3000);
　　　　　　});
　　　　});

　2.4渐变透明度 fadeTo()  （值介于 0 与 1 之间）。

　　语法:$(selector).fadeTo(speed,opacity,callback);　在使用的时候speed参数和opacity是必须要有的　　

　　例：<button>点我让颜色变淡</button>
　　　　<br><br>
　　　　<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
　　　　<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
　　　　<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>　　

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("#div1").fadeTo("slow",0.15);
　　　　　　　　$("#div2").fadeTo("slow",0.4);
　　　　　　　　$("#div3").fadeTo("slow",0.7);
　　　　　　});
　　　　});

3.滑动

　3.1向下滑动元素 slideDown() 

　　语法: $(selector).slideDown(speed,callback);

　　例：#panel,#flip{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3;}

　　　　#panel{ padding:50px; display:none;}

　　　　<div id="flip">点我滑下面板</div>
　　　　<div id="panel">Hello world!</div>

　　　　$(document).ready(function(){
　　　　　　$("#flip").click(function(){
　　　　　　　　$("#panel").slideDown("slow");
　　　　　　});
　　　　});

　3.2 向下滑动元素 slideUp()

　　语法：$(selector).slideUp(speed,callback);

　　例：#panel,#flip{ padding:5px; text-align:center;  border:solid 1px #c3c3c3;}

　　　　#panel{ padding:50px; }

　　　　<div id="flip">点我收起面板</div>
　　　　<div id="panel">Hello world!</div>

　　　　$(document).ready(function(){
　　　　　　$("#flip").click(function(){
　　　　　　　　$("#panel").slideUp("slow");
　　　　　　});
　　　　});

　3.3 切换向下、向上滑动元素 slideToggle()

　　语法： $(selector).slideToggle(speed,callback);

　　例：#panel,#flip{ padding:5px; text-align:center;  border:solid 1px #c3c3c3;}

　　　　#panel{ padding:50px; display:none;}

　　　　<div id="flip">点击显示或隐藏面板。</div>
　　　　<div id="panel">Hello world!</div>

　　　　$(document).ready(function(){
　　　　　　$("#flip").click(function(){
　　　　　　　　$("#panel").slideToggle("slow");

　　　　　　　　//$("#panel").slideToggle(5000);毫秒的写法不用加引号
　　　　　　});
　　　　});

4.动画

　4.1 创建自定义动画 animate()

　　语法： $(selector).animate({params},speed,callback); 必需带有 params 参数定义形成动画的 CSS 属性，其他参数可选。

　　例：<button>开始动画</button>
　　　　<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
　　　　如果需要改变位置，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute否则动画不生效</p>
　　　　<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>　

　　　　$(document).ready(function(){　　　　　　　　　　　　多个属性：$(document).ready(function(){
　　　　　　$("button").click(function(){　　　　　　　　　　　　　　　　　　$("button").click(function(){
　　　　　　　　$("div").animate({left:'250px'}, 5000);　　　　　　　　　　　　　　$("div").animate({
　　　　　　});　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　left:'250px',
　　　　});　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　opacity:'0.5',

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 height:'150px',

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 width:'150px'

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　},5000);

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 });

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 });

　　几乎可以用 animate() 方法来操作所有 CSS 属性，但是要注意使用驼峰式

　4.2 使用相对值

　　例：<button>开始动画</button>
　　　　<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("div").animate({
　　　　　　　　　　left:'250px',
　　　　　　　　　　height:'+=150px',
　　　　　　　　　　width:'+=150px'
　　　　　　　　},5000);
　　　　　　});
　　　　});

　4.3 使用预定义的值

　　例：<button>开始动画</button>
　　　　<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("div").animate({
　　　　　　　　　　height:'toggle'
　　　　　　　　},5000);
　　　　　　});
　　　　});

　4.4使用队列功能

　　例：<button>开始动画</button>
　　　　<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>

　　 例1：

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　var div=$("div");
　　　　　　　　div.animate({height:'300px',opacity:'0.4'},"slow");
　　　　　　　　div.animate({width:'300px',opacity:'0.8'},"slow");
　　　　　　　　div.animate({height:'100px',opacity:'0.4'},"slow");
　　　　　　　　div.animate({width:'100px',opacity:'0.8'},"slow");
　　　　　　});
　　　　});　

　　例2：

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　var div=$("div");
　　　　　　　　div.animate({left:'100px'},"slow");
　　　　　　　　div.animate({fontSize:'50px'},"slow");
　　　　　　});
　　　　});

5.停止动画

　　5.1 停止动画或效果 stop()  此方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

　　语法: $(selector).stop(stopAll,goToEnd);

　　 stopAll 参数规定是否清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此默认地，stop() 会清除在被选元素上指定的当前动画。

　　例：

　　#panel,#flip{ padding:5px; text-align:center;  border:solid 1px #c3c3c3;}

　　#panel{ padding:50px; display:none;}

　　<button id="stop">停止滑动</button>
　　<div id="flip">点我向下滑动面板</div>
　　<div id="panel">Hello world!</div>

　　例1：(不带参数，不写默认是fslse)　　　　　　　　　　　　　　　　　　　　 例2：（带参数 true）

　　$(document).ready(function(){　　　　　　　　　　　　　$(document).ready(function(){
　　　　$("#flip").click(function(){　　　　　　　　　　　　　　　　$("#flip").click(function(){
　　　　　　$("#panel").slideDown(5000); 　　　　　　　　　　　　　　$("#panel").slideDown(5000); 

　　　　　　$("#panel").slideUp(5000);　　　　　　　　　　　　　　　　$("#panel").slideUp(5000);　　　　　　　　　　　　　　　　　
　　　　});　　　　　　　　　　　　　　　　　　　　　　　　　　　　});
　　　　$("#stop").click(function(){　　　　　　　　　　　　　　　　$("#stop").click(function(){
　　　　　　$("#panel").stop();　　　　　　　　　　　　　　　　　　　　$("#panel").stop(true);
　　　　});　　　　　　　　　　　　　　　　　　　　　　　　　　　　});
　　});　　　　　　　　　　　　　　　　　　　　　　　　　　　});

　　停止当前的动画，但是会继续后面执行队列的动画　　　　　　　　　　停止执行所有的队列动画

　　　　　　　　　　　　例3：（带有 goToEnd 参数）　　　　　　

　　　　　　　　　　　　$(document).ready(function(){　
　　　　　　　　　　　　　　$("#flip").click(function(){　
　　　　　　　　　　　　　　　　$("#panel").slideDown(5000); 　

　　　　　　　　　　　　　　　　$("#panel").slideUp(5000);　
　　　　　　　　　　　　　　});
　　　　　　　　　　　　　　$("#stop").click(function(){
　　　　　　　　　　　　　　　　$("#panel").stop(true,true);
　　　　　　　　　　　　　　});
　　　　　　　　　　　　});

　　　　　　　 停止执行所有的队列动画，并且快速完成当前动画的动作（即，假如有5个队列动画，

现在正在执行第3个，点击之后停止执行所有队列的动画，但是会把当前（即第3个队列）的动画动作快速的完成）

6. 回调函数Callback方法   作为动画animate的第三个参数 Callback 函数是在当前动画 100% 完成之后执行的。

　　6.1 回调函数在动画animate中不是必写的，但在很多时候还是很有必要的。

　　例：（没有回调函数）

　　　　<button>隐藏</button>
　　　　<p>显示的内容，点击后隐藏</p>

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("p").hide(1000);
　　　　　　　　alert("现在段落被隐藏了");
　　　　　　});
　　　　});

　结果会导致的是在点击隐藏的时候，动画还没有执行就弹出了alert　

　　例：（有回调函数）

　　　　<button>隐藏</button>
　　　　<p>显示的内容，点击后隐藏</p>　　

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("p").hide("slow",function(){
　　　　　　　　　　alert("段落现在被隐藏了");
　　　　　　　　});
　　　　　　});
　　　　});

　结果是在完全执行玩动画之后才弹出alert

7.链接chaining  (Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）)

　例：<p id="p1">显示的内容</p>

　　　<button>点我</button>

　　　$(document).ready(function(){
　　　　　$("button").click(function(){
　　　　　　$("#p1").css("color","red").slideUp(2000).slideDown(2000);
　　　　　});
　　　});

　　提示：当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

因为jQuery 会抛掉多余的空格，并当成一行长代码来执行。　　

　　例：$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("#p1").css("color","red")
　　　　　　　　.slideUp(2000)
　　　　　　　　.slideDown(2000);
　　　　　　});
　　　　});

jquery快速入门（二）的更多相关文章

  1. jquery 快速入门二

    ---恢复内容开始--- 操作标签 样式操作 样式类 addClass();//添加指定的CSS类名. removeClass();//移除指定的类名. hasClass();//判断样式不存在 to ...

  2. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  3. JQuery的入门(二)

    Jquery的遍历 jQuery对象本身就是数组对象,通过jquery选择器获得的都是满足该选择器条件的元素对象的集合体,因此在常常需要对jquery对象进行遍历.这里有三种遍历Jquery的方法. ...

  4. python3.5+django2.0快速入门(二)

    昨天写了python3.5+django2.0快速入门(一)今天将讲解配置数据库,创建模型,还有admin的后台管理. 配置数据库 我们打开mysite/mysite/settings.py这个文件. ...

  5. jQuery 快速入门教程

    内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...

  6. JQuery快速入门-选择器

    JQuery选择器 JQuery 选择器继承了CSS 与Path 语言的部分语法,允许通过标签名.属性名或内容对DOM 元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery 选择器对页 ...

  7. jQuery快速入门专题

    jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...

  8. jquery快速入门（一）

    一.jquery加载文档 jquery加载文档(也叫入口函数) $(document).ready(function(){ // 这里写 jQuery 代码... }); 简写方式: $(functi ...

  9. JQuery快速入门-简介

    一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

随机推荐

  1. 什么？云数据库也能C位出道？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 是的,你没有看错.腾讯智造,新一代云数据库CynosDB,"C"位出道了! CynosDB是腾讯云自研的新一代高性能高可 ...

  2. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  3. CSS 盒模型与box-sizing

    一.盒模型 一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...

  4. 【Canal源码分析】Sink及Store工作过程

    一.序列图 二.源码分析 2.1 Sink Sink阶段所做的事情,就是根据一定的规则,对binlog数据进行一定的过滤.我们之前跟踪过parser过程的代码,发现在parser完成后,会把数据放到一 ...

  5. ISCC2018（最新的考核解析）

    最近一直在做这个 ISCC2018,感觉可能自己只是一个新手吧!但是我会继续努力的,希望我的解题思路能够给你们带来一定的想法,我也希望自己能够在安全方面遇到更多志同道合的人! 其它题目可以看这里 1 ...

  6. 谈谈volatile关键字以及常见的误解

    转载请保留以下声明 作者:赵宗晟 出处:https://www.cnblogs.com/zhao-zongsheng/p/9092520.html 近期看到C++标准中对volatile关键字的定义, ...

  7. mysql怎样配置ODBC数据源

      一个基于ODBC的应用程序对数据库的操作不依赖任何DBMS,不直接与DBMS打交道,所有的数据库操作由对应的DBMS的ODBC驱动程序完成.所以说mysql配置ODBC数据源也很重要. 工具/原料 ...

  8. 目前比较流行的Python量化开源框架汇总(交易+风险分析工具)

     注:点击框架名称通往Github talib talib的简称是Technical Analysis Library,主要功能是计算行情数据的技术分析指标 numpy 介绍:一个用python实现的 ...

  9. 手写DotNet Core 认证授权代码

    在普通的MVC项目中 我们普遍的使用Cookie来作为认证授权方式,使用简单.登录成功后将用户信息写入Cookie:但当我们做WebApi的时候显然Cookie这种方式就有点不适用了. 在dotnet ...

  10. 补习系列(16)-springboot mongodb 数据库应用技巧

    目录 一.关于 MongoDB 二.Spring-Data-Mongo 三.整合 MongoDB CRUD A. 引入框架 B. 数据库配置 C. 数据模型 D. 数据操作 E. 自定义操作 四.高级 ...