首页 > 代码库 > JQuery 隐藏和显示

JQuery 隐藏和显示

2024-10-28 20:15:02   209人阅读

给<p></p>添加点击事件，如果点击$(this).hide()

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script type="text/javascript" src="http://www.mamicode.com/jquery-3.2.1.min.js">
 5 </script>
 6 <script type="text/javascript">
 7 $(document).ready(function(){
 8     $("p").click(
 9             function(){
10                 $(this).hide();
11             });
12 });
13 </script>
14 </head>
15 
16 <body>
17 <p>点击会消失</p>
18 <p>点击会消失</p>
19 </body>
20 </html>

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。


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

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

实例

技术分享 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script type="text/javascript" src="http://www.mamicode.com/jquery-3.2.1.min.js">
 5 </script>
 6 <script type="text/javascript">
 7 $(document).ready(function(){
 8     $("button").click(function(){
 9         $("p").toggle();
10     });
11 });
12 </script>
13 </head>
14 
15 <body>
16 <p>点击会消失</p>
17 <p>点击会消失</p>
18 <button type="button">切换</button>
19 </body>
20 </html>
View Code

jQuery fadeIn() 用于淡入已隐藏的元素。

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

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

jQuery fadeTo() 方法

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

技术分享 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://www.mamicode.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn();
        $("#div2").fadeIn(4000);
        $("#div3").fadeIn("slow");
    });
});
</script>
</head>

<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
View Code

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

 

JQuery 隐藏和显示


联系
我们