jQUery效果--show([speed,[easing],[fn]])和hide([speed,[easing],[fn]])
阿新 • • 發佈：2018-12-08
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>