如何在沒有顯示時為div添加時間延遲

Question

我想在HTML中的內容中添加read more按鈕，當點擊該按鈕時，它應該顯示隱藏的div並且不顯示read more按鈕。 我做到了，但現在我想順利地做到這一點。 我希望在顯示時為隱藏的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（）做了簡單而順利的你可以嘗試使用代碼片段檢查出來

 $("#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 2

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

你可以使用.fadeIn和.fadeOut與.delay的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);
                });
         }
    });

這是鏈接