程序员人生 网站导航

jQuery基础学习(2)(效果)

栏目:htmlcss时间:2016-07-18 08:21:56
  • jQuery效果

a.隐藏效果


  • $(selector).hide(speed,callback);

  • $(selector).show(speed,callback);
    (1)可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
    (2)可选的 callback 参数是隐藏或显示完成后所履行的函数名称。

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF⑻"> <title></title> <script src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".ex .hide").click(function(){ //设置缓慢隐藏 // $(this).parents(".ex").hide("slow"); // }); $(this).parents(".ex").hide("slow",function(){ alert('ddd'); }); }); </script> <style type="text/css"> .ex{ background-color: #e5eecc; padding: 7px; border: solid 1px #c3c3c3; } </style> </head> <body> <h3>中国办事处</h3> <div class="ex"> <button class="hide" type="button">隐藏</button><br> <p>联系人:张先生<br/> 北3环中路 100 号<br/> 北京</p> </div> <h3>美国办事处</h3> <div class="ex"> <button class="hide" type="button">隐藏</button> <p>联系人:David<br /> 第5大街 200 号<br /> 纽约</p> </div> </body> </html>
$("button").click(function(){ $("p").hide(1000); });

jQuery toggle()

通过 jQuery,您可使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素,并隐藏已显示的元素:

$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script>

b. jQuery Fading 方法


通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 具有下面4种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。

可选的 callback 参数是 fading 完成后所履行的函数名称

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.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>点击这里,使3个矩形淡入</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>

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。
语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所履行的函数名称。

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.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>点击这里,使3个矩形淡出</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>

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所履行的函数名称。

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.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>点击这里,使3个矩形淡入淡出</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>

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变成给定的不透明度(值介于 0 与 1 之间)。
语法:

$(selector).fadeTo(speed,opacity,callback);

必须的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
fadeTo() 方法中必须的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所履行的函数名称。

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.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>点击这里,使3个矩形淡出</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>

jQuery 滑动方法

通过 jQuery,您可以在元素上创建滑动效果。
jQuery 具有以下滑动方法:
slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。
语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所履行的函数名称。

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.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>

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。
语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所履行的函数名称。

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.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>

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。

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

可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所履行的函数名称。

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.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>

jQuery动画

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。
语法:

$(selector).animate({params},speed,callback);

必须的 params 参数定义构成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所履行的函数名称。
//1个实现从左到右移动的动画
demo1:

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.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>

demo2:

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.11.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); }); </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>

demo3:

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); }); </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>
//属性的动画值设置为 "show"、"hide" 或 "toggle": $(document).ready(function(){ $("button").click(function(){ $("div").animate({ height:'toggle' }); }); });

jQuery animate() - 使用队列功能

默许地,jQuery 提供针对动画的队列功能。
这意味着如果您在彼此以后编写多个 animate() 调用,jQuery 会创建包括这些方法调用的“内部”队列。然后逐1运行这些 animate 调用。

<!DOCTYPE html> <html> <head> <script src="jquery.min.js"></script> <script> $(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"); }); }); </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> <html> <head> <meta charset="u"> <script src="jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({left:'100px',opacity:'0.6'},"slow"); div.animate({fontSize:'3em',color: '2E9ECE'},"slow"); }); }); </script> </head> <body> <button>开始动画</button> <p>默许情况下,所有 HTML 元素的位置都是静态的,并且没法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body> </html>

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.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>

jQuery动作的链接

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery⑴.11.1.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000); }); }); </script> </head> <body> <p id="p1">jQuery 乐趣10足!</p> <button>点击这里</button> </body> </html>
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐