jquery css 实现div隐藏显示过渡效果

最新推荐文章于 2024-06-04 17:36:46 发布

bbkkkk

最新推荐文章于 2024-06-04 17:36:46 发布

阅读量482

点赞数

分类专栏：全栈之路-前端文章标签： css jquery javascript

本文链接：https://blog.csdn.net/bbkkkk/article/details/130195972

版权

全栈之路-前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该代码示例展示了如何通过CSS的transition属性和opacity来创建一个平滑的隐藏与展示效果，而不是直接使用display:none和block。当点击按钮时，元素的透明度会通过过渡效果从0变为1，实现渐显；再次点击，元素会渐隐。这个效果利用了jQuery来添加和移除.active类，触发CSS样式变化。

摘要由CSDN通过智能技术生成

css的display none和block实现隐藏展示效果比较生硬，自己参考资料实现了过渡一个效果，

可通过修改 transitionz中秒来调整过渡强度

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="./asserts/js/jquery-3.6.3.min.js"></script>

    <style>
      .animated_opacity {
        font-size: 12px;
        width: 190px;
        height: 25px;
        background: #92b901;
        color: #ffffff;
        position: relative;
        font-weight: bold;
        padding: 8px 8px 0px 8px;
        margin: 5px;
        opacity: 0;
        filter: Alpha(opacity=0);
        transition: opacity 2s;
        width: 100px;
        height: 200px;
      }
      .animated_opacity.active {
        opacity: 1;
        filter: Alpha(opacity=100);
      }
      .btn-default {
        background-color: #fff;
        padding: 10px;
        border: 1px solid #bbbbbb;
        width: 150px;
      }

      .btngroup {
        text-align: right;
        margin: 8px 0;
        z-index: 999;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function () {
        $(".openUserEditBox").on("click", function () {
          // $(".user-drawer")[0].style.left = "0";
          $(".animated_opacity").addClass("active");
        });
        $(".closeUserEditBox").on("click", function () {
          // $(".user-drawer")[0].style.left = "602px";
          $(".animated_opacity").removeClass("active");
        });
      });
    </script>
  </head>
  <body>
    <button class="btn-default openUserEditBox">Show</button>
    <button class="btn-default closeUserEditBox">Hide</button>
    <div class="animated_opacity">点击后显示与消失</div>
  </body>
</html>