23_显示与隐藏

最新推荐文章于 2024-01-10 16:56:40 发布

J-April

最新推荐文章于 2024-01-10 16:56:40 发布

阅读量74

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_47016497/article/details/118151901

版权

jQuery 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>23_显示与隐藏</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }

  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50px;
    left: 10px;
    background: red;
    display: none;
  }
</style>
<body>
<button id="btn1">瞬间显示</button>
<button id="btn2">慢慢显示</button>
<button id="btn3">慢慢隐藏</button>
<button id="btn4">显示隐藏切换</button>

<div class="div1">
</div>

<!--
显示隐藏，默认没有动画, 动画(opacity/height/width)
1. show(): (不)带动画的显示
2. hide(): (不)带动画的隐藏
3. toggle(): (不)带动画的切换显示/隐藏
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
  需求:
  1. 点击btn1, 立即显示
  2. 点击btn2, 慢慢显示
  3. 点击btn3, 慢慢隐藏
  4. 点击btn4, 切换显示/隐藏
   */
  var $div1 = $('.div1')
  //1. 点击btn1, 立即显示
  $('#btn1').click(function () {
    $div1.show()
  })

  //2. 点击btn2, 慢慢显示
  $('#btn2').click(function () {
    $div1.show(1000)
  })

  //3. 点击btn3, 慢慢隐藏
  $('#btn3').click(function () {
    $div1.hide(1000)
  })

  //4. 点击btn4, 切换显示/隐藏
  $('#btn4').click(function () {
    $div1.toggle(1000)
  })
</script>
</body>
</html>