码迷,mamicode.com
首页 > Web开发 > 详细

JQuery 隐藏和显示

时间:2017-07-17 20:08:23      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:anim   src   属性   jquer   document   code   style   opened   this   

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script type="text/javascript" src="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="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="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 隐藏和显示

标签:anim   src   属性   jquer   document   code   style   opened   this   

原文地址:http://www.cnblogs.com/abstract-fabulous/p/7197090.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!