javascript - 不显示时如何为div添加时间延迟

Question

我想在 HTML 中的内容中添加阅读更多按钮，当单击该按钮时，它应该显示隐藏的 div 并且不显示阅读更多按钮。我做到了，但现在我想顺利地做到这一点。我想在显示时为隐藏的 div 添加时间延迟。

这是我的 HTML 代码。

<div class="col-md-12">
    <h3>nhlkhlhlib;b</h3>
    <p>hjglhvlgugyjlbljg</p>
</div>
<div class="col-md-12 add-margin-bottom">
    <div class="col-md-12">
       <button class="btn-read-more" id="read-one">READ MORE</button>
    </div>
    <div class="col-md-12 no-padding" id="para-one">
       <p>hgkjhfkuyfkvkkviyftyff</p>
    </div>
</div>

当点击id=read-one 按钮时。它显示 id="para-one"。

这是我使用的 java 脚本。

$( '.btn-read-more' ).click(function() {
        var id = $(this).attr('id');
            if(id=="read-one"){
            $("#read-one").css("display","none");
            $("#para-one").css("display","block");
            });
});

所以我想为这个点击 Action 添加时间延迟。

谁能帮帮我？

Answer 1

纯 CSS 解决方案怎么样？*

这里的核心是你不能在 display 上转换/动画，因为它是一个二进制/非序数属性。您需要在 height 或 max-height 上进行转换。原因在例如您的用例 display 是 none 或 block，中间值是什么？由于 height 和 max-height 是基于单位的值，中间值可以计算为随时间变化的量的函数。

虽然这可以在 javascript 中完成，但在 CSS 中编写样式更改可以保持内容 (HTML)、功能 (JS) 和样式 (CSS) 之间的严格分离。尽管纯 CSS 解决方案可能不合适，但它可以让您了解如何做到这一点。在您的 javascript 中，您可以简单地在相关元素上切换一个类，而不是定义转换/样式，*请参阅下面的第二个示例以了解 javascript 实现。

input[type=checkbox] {
  display: none;
}
p {
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: max-height 300ms, opacity 200ms;
}
input[type=checkbox]:checked + p {
  max-height: 150px;
  opacity: 1;
}

<div>
  <label for="read-more">READ MORE</label>
  <input id="read-more" type='checkbox' />
  <p>some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />
  </p>
</div>

Javascript 替代品

$('button').on('click', function() {
  $('p').toggleClass('expand');
});

    p {

      overflow: hidden;

      opacity: 0;

      max-height: 0;

      transition: max-height 300ms, opacity 200ms;

    }

    p.expand {

      max-height: 150px;

      opacity: 1;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button>READ MORE</button>
  <p>some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />
  </p>
</div>