jQuery效果函数---权威
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery效果函数---权威相关的知识，希望对你有一定的参考价值。
jQuery可以创建隐藏、显示、切换、滑动以及自定义动画等效果。
| jQuery hide | <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>如果您点击我，我会消失。</p> <p>点击我，我会消失。</p> <p>也要点击我哦。</p> </body> </html> |
| jQuery slideToggle | <!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> |
| jQuery fadeTo | <!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;"></div> <br> <div id="div2" style="width:80px;height:80px;"></div> <br> <div id="div3" style="width:80px;height:80px;"></div> </body> </html> |
| jQuery animate | <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.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> |
jQuery隐藏和显示
通过hide（）和show（）两个函数，jQuery支持对HTML元素隐藏和显示：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
jQuery切换
jQuery toggle（）函数使用show（）或hide（）函数来切换 HTML 元素的可见状态。
隐藏显示的元素，显示隐藏的元素。
$(selector).toggle(speed,callback)
$("button").click(function(){
$("p").toggle();
});
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数：
$(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例
$(".flip").click(function(){
$(".panel").slideDown();
});
slideUp() 实例
$(".flip").click(function(){
$(".panel").slideUp()
})
slideToggle() 实例
$(".flip").click(function(){
$(".panel").slideToggle();
});
函数
| 描述 | |
|---|---|
| $(selector).hide() | 隐藏被选元素 |
| $(selector).show() | 显示被选元素 |
| $(selector).toggle() | 切换（在隐藏与显示之间）被选元素 |
| $(selector).slideDown() | 向下滑动（显示）被选元素 |
| $(selector).slideUp() | 向上滑动（隐藏）被选元素 |
| $(selector).slideToggle() | 对被选元素切换向上滑动和向下滑动 |
| $(selector).fadeIn() | 淡入被选元素 |
| $(selector).fadeOut() | 淡出被选元素 |
| $(selector).fadeTo() | 把被选元素淡出为给定的不透明度 |
| $(selector).animate() | 对被选元素执行自定义动画 |
以上是关于jQuery效果函数---权威的主要内容，如果未能解决你的问题，请参考以下文章