JQuery教程详解二之JQuery效果
来源：互联网 发布：软件部署实施方案 编辑：程序博客网 时间：2024/05/16 13:43
JQuery教程详解一: 重点讲解: 简介，安装，语法，选择器，事件
这里主要讲解的是JQuery的效果:
最基本的效果就是隐藏与显示，以及切换这俩功能
先来看语法,hide与show与toggle括号里面啥意思(speed指的是速度，也就是隐藏与显示与切换的速度，callback指的是隐藏与显示与切换功能执行完成之后要调用的回调函数)
$(selector).hide(speed,callback);$(selector).show(speed,callback);$(selector).toggle(speed,callback);
来看个实际的例子，hide只是隐藏，show 只是显示，toggle会在隐藏与显示之间切换
!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });});</script></head><body><p id="p1">如果点击“隐藏”按钮，我就会消失。</p><button id="hide" type="button">隐藏</button><button id="show" type="button">显示</button></body></html><!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); });});</script></head><body><button type="button">切换</button><p>这是一个段落。</p><p>这是另一个段落。</p></body></html>第二种你肯定好奇，淡入淡出功能，以及这俩的切换，外加一个透明度，看。
先来看基本语法
$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);$(selector).fadeToggle(speed,callback);$(selector).fadeTo(speed,opacity,callback);
先看淡入的3种不同的速度下的功能显示:
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });});</script></head><body><p>演示带有不同参数的 fadeIn() 方法。</p><button>点击这里，使三个矩形淡入</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></body></html>再看3种不同的淡出下的功能显示<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });});</script></head><body><p>演示带有不同参数的 fadeOut() 方法。</p><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></body></html> 这个淡入与淡出在3中不同速度下通过按钮来实现切换的功能<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });});</script></head><body><p>演示带有不同参数的 fadeToggle() 方法。</p><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></body></body></html>最后一种是给定不同的透明度值，不知道为啥是to，这个明明不够直接明了<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });});</script></head><body><p>演示带有不同参数的 fadeTo() 方法。</p><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></body></html>第三种动画你肯定在很多视频网站上可以看到，向下滑动，向上滑动，以及这俩的切换，说到切换，我觉得切换这个功能最智能了，随意改变
先来了解基本语法
$(selector).slideDown(speed,callback);$(selector).slideUp(speed,callback);$(selector).slideToggle(speed,callback);
向下滑动的效果:<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); });});</script> <style type="text/css"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head> <body> <div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。</p></div> <p class="flip">请点击这里</p> </body></html>向上滑动的效果:<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideUp("slow"); });});</script> <style type="text/css"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.panel{height:120px;}</style></head> <body> <div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。</p></div> <p class="flip">请点击这里</p> </body></html>切换的功能<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript"> $(document).ready(function(){$(".flip").click(function(){ $(".panel").slideToggle("slow"); });});</script> <style type="text/css"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head> <body> <div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。</p></div> <p class="flip">请点击这里</p> </body></html>关于向上滑动以及向下滑动，我想了解的是:<style type="text/css"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style>这个规定的样式非常的智能，以后可以在项目中多多使用;第四个：我想不管做网页或者客户端肯定都会很喜欢的 动画
老规矩基本语法:
$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。看下默认效果<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}); });});</script> </head> <body><button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>animate多个属性设置$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });animate使用相对值$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });});animate使用预定义的值$("button").click(function(){ $("div").animate({ height:'toggle' });});animate使用队列功能$("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");});$("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow");});注意点就是 postion 选值必须选，relative、fixed 或 absolute，这三个任选一个就可以.
第五点，做事有始有终，开始了，我突然想反悔，好的，那就使用停止功能，可别小看停止功能;
先来看基本语法
$(selector).stop(stopAll,goToEnd);
StopAll 就是停止所有
goToEnd 就是直接结束
先从简单的来看 stop（）<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); });});</script> <style type="text/css"> #panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel{padding:50px;display:none;}</style></head><body> <button id="stop">停止滑动</button><div id="flip">点击这里，向下滑动面板</div><div id="panel">Hello world!</div></body></html>这个stop() 是在动画运行完成之前停止的;这么做有点low，来点有难度的<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).ready(function(){ $("#start").click(function(){ $("div").animate({left:'100px'},5000); $("div").animate({fontSize:'3em'},5000); }); $("#stop").click(function(){ $("div").stop(); }); $("#stop2").click(function(){ $("div").stop(true); }); $("#stop3").click(function(){ $("div").stop(true,true); }); });</script> </head><body><button id="start">开始</button><button id="stop">停止</button><button id="stop2">停止所有</button><button id="stop3">停止但要完成</button><p><b>"开始"</b> 按钮会启动动画。</p><p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p><p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p><p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div></body></html>就是添加了一些动画参数，执行的效果更加的任性话.第六点，CallBack就不做过多的介绍了
瞄一眼语法就过
$(selector).hide(speed,callback)
为了你能够更好的理解，还是来个实际的例子<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); });});</script></head><body><button type="button">Hide</button><p>This is a paragraph with little content.</p></body></html>第七点，简直就是极大的简化了JQuery代码的操作
通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）
写法略有不同，单本质都是一样的:
方法一:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);方法二:
$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);更多文章，请关注: http://blog.csdn.NET/qq_37022150?viewmode=list
阅读全文
0 0
- JQuery教程详解二之JQuery效果
- 【jQuery 教程】jQuery 效果
- jQuery学习 二 jQuery 效果
- jQuery效果之选项卡二
- jQuery学习笔记之二：显示效果
- jQuery教程 5 效果
- jQuery (二) 效果学习
- （二）jQuery效果
- Jquery mobile学习教程之Jquery mobile 二 页面结构
- jquery教程二：属性
- jquery系列教程二
- jQuery源码之动画详解二
- jQuery学习教程四：jQuery 效果
- jQuery学习教程五：jQuery 效果
- jQuery学习教程六: jQuery 效果
- jQuery学习教程七: jQuery 效果
- jQuery之效果
- jQuery效果之滑动
- Realm基础
- php和java之间aes加密的互通
- CCF201312-1 出现次数最多的数 桶排序
- @Cacheable注解在spring3中的使用-实现缓存
- ArrayList源码(2)
- JQuery教程详解二之JQuery效果
- popen函数
- html_day04_字符实体
- [UVa1626]括号序列
- 利用边框制作三角形
- python和java中斜杠的写法及区分
- PAT 1008数组元素循环右移
- raspberry pi 2安装rtl8811/ 8821网卡驱动
- 极乐小程序榜单（第三期）
