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

您好我已经使用fadeIn（）和fadeOut（）轻松顺利地完成了代码片段检查

＆＃13;

$("#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");
            });
};
});

＆＃13;

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

＆＃13;

Answer 2

纯CSS解决方案怎么样？*

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

虽然这可以在javascript中完成，但在CSS中编写样式更改可以在内容（HTML），函数（JS）和样式（CSS）之间保持严格的关注点分离。虽然纯CSS解决方案可能不合适，但它可以让您了解如何完成此操作。在你的javascript中，你可以简单地在有问题的元素上切换一个类，而不是定义转换/样式，*请参阅下面的第二个例子来了解javascript实现。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Javascript Alternative

＆＃13;

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

＆＃13;

    p {

      overflow: hidden;

      opacity: 0;

      max-height: 0;

      transition: max-height 300ms, opacity 200ms;

    }

    p.expand {

      max-height: 150px;

      opacity: 1;

    }

＆＃13;

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

＆＃13;

Answer 3

你可以使用.fadeIn和.fadeOut与.delay of jquery：

$('.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/

Answer 4

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

$( '.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

如何在没有显示时为div添加时间延迟

4 个答案:

纯CSS解决方案怎么样？*

Javascript Alternative