显示无时如何向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");
            });
});

所以我想为此点击操作添加时间延迟。

谁能帮帮我？

Answer 1

谁给出了这个答案？它工作正常。不幸的是，他删除了他的答案。无论如何，非常感谢那些试图帮助我的人。

$( '.btn-read-more' ).click(function() {
        var id = $(this).attr('id');
            if(id=="read-one") {
                $("#read-one").hide(300, function () {
                    $("#para-one").show(300);
                });
         }
    });

this is the link

Answer 2

您好，我用fadeIn() 和fadeOut() 简单流畅地完成了它，您可以尝试sn-p 代码检查一下

$("#para-one").hide();
$( '.btn-read-more' ).click(function() {
        var id = $(this).attr('id');
        if(id=="read-one"){
            $("#read-one").fadeOut("fast",function(){
            $("#para-one").delay(300).fadeIn("fast");
            });
};
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>hgkjhfkuyfkvkkviyftygfgf<br>sdvdvdvsdvff<br>fdfdfdfdfdf</p>
    </div>
</div>

Answer 3

纯 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>

Answer 4

您可以使用 .fadeIn 和 .fadeOut 与 jquery 的 .delay：

$('.btn-read-more').click(function() {
var id = $(this).attr('id');
if (id=="read-one"){
    $("#read-one").fadeOut('fast');
    $("#para-one").delay(2000).fadeIn('slow');
}

});

见小提琴https://jsfiddle.net/bm0yv8o3/