JQuery基础篇之淡入淡出

最新推荐文章于 2022-01-21 09:32:15 发布

废柴前端

最新推荐文章于 2022-01-21 09:32:15 发布

阅读量256

点赞数 1

分类专栏： JQuery实现淡入淡出文章标签： JQuery实现淡入淡出

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/zhuxiandan/article/details/77161068

版权

JQuery实现淡入淡出专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在JQuery中，想要让一个元素隐藏起来，有很多种方法，同样，让一个隐藏的元素显示，也有对应的方法，调整里面的参数，就可以实现淡入淡出

①显示元素：前提条件是元素已被隐藏

方法：$("元素").show()

调用此方法可以显示被隐藏的元素，括号里面可以自定义显示的时间，可以是“slow”，“fast”，也可以是毫秒数。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <title>Title</title>
   <link rel="stylesheet" href="">
   <style>
      div{
         width: 200px;
         height:200px;
         background: #ff7112;
         display: none;
      }
   </style>
   <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
   <script>
     $(function () {
         var btn=$('button');
         btn.click(function () {
           $('div').show(1000)
         })
     })
   </script>
</head>
<body>
<div></div>
<button>Show</button>
</body>
</html>

与此相同的显示方式还有：$(''selector").fadeIn() $("selector").slideUp()

②隐藏元素

I.$("selector").hide()

II. $("selector").slideDown()

III. $("selector").fadeOut()

以上方式均可以实现元素的显示和隐藏，只要改变方法里面的时间参数，就可以实现淡入淡出

其实JQuery为了方便编程人员，还提供了另外几种方法，可以一键实现元素的显示与隐藏，简单点来说就是元素是显示的，点击按钮可以隐藏，反之亦可，这样就不用写两个函数了

①$("selector").toggle("slow")

②$("selector").fadeToggle(1000)

③$("selector").slideToggle("fast")
标注：这三种方法可以让显示的元素隐藏，隐藏的元素显示，改变里面的参数值便可实现淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <title>Title</title>
   <link rel="stylesheet" href="">
   <style>
      div{
         width: 200px;
         height:200px;
         background: #ff7112;
         display: none;
      }
   </style>
   <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
   <script>
     $(function () {
         var btn=$('button');
         btn.click(function () {
           $('div').slideToggle("fast")   //fast可以替换成“slow”,也可以换成毫秒数
         })
     })
   </script>
</head>
<body>
<div></div>
<button>Show</button>
</body>
</html>

废柴前端

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery基础篇之淡入淡出

在JQuery中，想要让一个元素隐藏起来，有很多种方法，同样，让一个隐藏的元素显示，也有对应的方法，调整里面的参数，就可以实现淡入淡出①显示元素：前提条件是元素已被隐藏方法：$("元素").show()调用此方法可以显示被隐藏的元素，括号里面可以自定义显示的时间，可以是“slow”，“fast”，也可以是毫秒数。 Title d
复制链接

扫一扫