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

最新推荐文章于 2022-01-18 18:06:10 发布

majinbo111

最新推荐文章于 2022-01-18 18:06:10 发布

阅读量5.4k

点赞数

分类专栏： WEB前端文章标签： jquery hide show 延迟

本文链接：https://blog.csdn.net/u011944141/article/details/54945717

版权

WEB前端专栏收录该内容

42 篇文章 1 订阅

订阅专栏

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);
});

majinbo111

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录