Jquery hide、show、fadeIn、fadeOut 竟然可以延迟

2024-04-27 15:17:07

字体：大中小

来源：转载

供稿：网友

jQuery hide() 、show()及 toggle()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，toggle() 方法用来切换 hide() 和 show() 方法：

$("#hide").click(function(){ $("p").hide();});$("#show").click(function(){ $("p").show();});$("button").click(function(){ $("p").toggle();});

亲自试一试语法：

$(selector).hide(speed,callback);$(selector).show(speed,callback);$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。下面的例子演示了带有 speed 参数的 hide() 方法：实例:

<!DOCTYPE html><html><head><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script type="text/javascript">$(document).ready(function() { $("#hide").click(function() { $("#p1").hide(); $("#p2").hide('fast'); $("#p3").hide('slow'); $("#p4").hide(3000); }); $("#show").click(function() { $("#p1").show(); $("#p2").show('fast'); $("#p3").show('slow'); $("#p4").show(3000); }); $("#fadeOut").click(function() { $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); $("#fadeIn").click(function() { $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });});</script></head><body><p id="p1">p1:如果点击“隐藏”按钮，我就会消失(默认)。</p><p id="p2">p2:如果点击“隐藏”按钮，我就会消失(fast)。</p><p id="p3">p3:如果点击“隐藏”按钮，我就会消失(slow)。</p><p id="p4">p4:如果点击“隐藏”按钮，我就会消失(3秒)。</p><button id="hide" type="button">隐藏</button><button id="show" type="button">显示</button><br><p>演示带有不同参数的 fadeIn() 方法。</p><button id="fadeIn">点击这里，使三个矩形淡入</button><br><p>演示带有不同参数的 fadeOut() 方法。</p><button id="fadeOut">点击这里，使三个矩形淡出</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 fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。语法： $(selector).fadeIn(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。下面的例子演示了带有不同参数的 fadeIn() 方法：实例

$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000);});

jQuery fadeOut() 方法

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

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

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。下面的例子演示了带有不同参数的 fadeOut() 方法：实例

$("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000);});

jQuery fadeToggle() 方法

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

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

可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。下面的例子演示了带有不同参数的 fadeToggle() 方法：实例

$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000);});

jQuery fadeTo() 方法

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

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

必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。 fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。下面的例子演示了带有不同参数的 fadeTo() 方法：实例

$("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7);});