jQuery效果--show([speed,[easing],[fn]])和hide([speed,[easing],[fn]])

时间:2024-01-21 23:37:15

hide([speed,[easing],[fn]])

概述

隐藏显示的元素

这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西

参数

[speed],[easing],[fn]

   speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

   easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"

   fn:在动画完成时执行的函数,每个元素执行一次

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("p").eq(0).hide(); $("p:eq(1)").hide("slow"); $("p:eq(2)").hide("slow",function(){
$("button").css("color","#FF0000");
});
});
});
</script>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<button>点击我,隐藏段落</button>
</body>
</html>

show([speed,[easing],[fn]])

概述

显示隐藏的匹配元素

这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效

参数 

[speed],[easing],[fn]

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

   easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"

   fn:在动画完成时执行的函数,每个元素执行一次

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<style type="text/css">
p{
display: none;
}
</style>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("p").eq(0).show(); $("p:eq(1)").show("slow"); $("p:eq(2)").show("slow",function(){
$(this).css("color","#FF0000");
});
});
});
</script>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<button>点击我,显示段落</button>
</body>
</html>