如何在點擊功能上淡出文字？

Question

我希望淡出並淡出我的p元素的一些文本，當我點擊按鈕時，我已經在max-height css的幫助下隱藏了這些文本。 我嘗試使用我在css技巧中找到的代碼片段，即https://css-tricks.com/text-fade-read-more/進行更改並使用我的html，css和javascript進行此操作，但它沒有成功。

我的HTML代碼：

 <div class="content">
        <div class="article">
            <h2>The Most Popular Leg Workout for Women</h2>
            <img src="img/leg-workout.jpg">
            <div class="article-text">
                <p>Far far away, <strong> behind the word mountains </strong>, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth..
                Far far away, <strong> behind the word mountains </strong>, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth..</p> 
                <blockquote>"It is a shame for a man to grow old without seeing the beauty and strength of which his body is capable." - Socrates</blockquote>                  
                <div class="fade"></div>
                <button class="btn read-more" type="button">Read More</button>          
            </div>      
        </div>
   </div>

CSS：

.article {
    width: 80% ;
    margin: 5% auto;
    margin-top: 0;
    height: 300px;
}

h2 {
    color: #4d4d4d;
}

.article img {
    width: 40%;
    height: auto;
    float:left;
    padding: 10px 20px;
    padding-left: 0;

}

.article-text {
    text-align: justify;
    max-height: 125px;
    position: relative;
    overflow: hidden;
}

.article .read-more { 
    position: absolute; 
    text-align: center; 
    margin: 0; 
    padding: 10px 10px; 
    bottom: 50px;
    left: 260px;
}

.fade {
    background: linear-gradient( rgba(255,0,0,0), white);
    height: 120px;
    position: relative;
    opacity: 1!important;
    top: -260px;
}

Javascript：

function fadeOutOnClick() {
    $(function() {
        $('.read-more').click( function (){
            $('.fade').toggleClass('fade-on','fade-off');
        });
    });
}

    window.addEventListener("DOMContentLoaded", function() {
        fadeOutOnClick();
    });      

我工作的Codepen： https ：//codepen.io/anamolshres55/pen/bKXEoO

Answer 1

一個更簡單的版本怎么樣？

編輯.article-text max-height以更改預覽文本的大小。

 $('.btn.read-more').click( function() { $(this).siblings('.article-text').addClass('visible'); $(this).siblings('.btn.read-less').show(); $(this).hide(); } ); $('.btn.read-less').click( function() { $(this).siblings('.article-text').removeClass('visible'); $(this).siblings('.btn.read-more').show(); $(this).hide(); } ); 

 .article-text { display: block; max-height: 80px; position: relative; overflow: hidden; transition: max-height 1.5s; } .btn.read-less { display: none; } .article-text::before { content: ""; display: block; position: absolute; bottom: 0px; width: 100%; height: 20px; margin-top: 20px; background: linear-gradient(to bottom, transparent, white); } .article-text.visible { max-height: 500px; } .article-text.visible::before { /* display: none; */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="article"> <!-- <h2>The Most Popular Leg Workout for Women</h2> --> <!-- <img src="https://via.placeholder.com/300x30"> --> <div class="article-text"> <p>Some Text</p> <p>Far far away, <strong> behind the word mountains </strong>, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> <p>Far far away, <strong> behind the word mountains </strong>, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> <blockquote class="read-more-text">"It is a shame for a man to grow old without seeing the beauty and strength of which his body is capable." - Socrates</blockquote> </div> <button class="btn read-more" type="button">Read More...</button> <button class="btn read-less" type="button">Read Less...</button> </div> </div> 

編輯添加了文本預覽

編輯添加了無讀（不完美但工作）

Answer 2

jQuery的.fadeOut（）方法依賴於CSS的display屬性。 要使它在隱藏元素上工作，必須通過添加display：none來隱藏元素本身; 它的CSS。 既然你提到你使用max-height來隱藏它我覺得這是你的問題。 或者，您可以在腳本開頭調用.hide（）方法來隱藏元素，而不是通過CSS完成。

Answer 3

您的需求與您指定的鏈接不同。 您的腳本可以更簡單，如下所示：

$(document).ready(function() {
    $("button.read-more").on("click", function() {
        // get the closest article-text div that holds the "read more" button
        var articleDiv = $(this).closest("div.article-text");

        // calculate the total height on ALL elements inside it except for your fade overlay div
        var totalHeight = 0;
        articleDiv.find("*:not('div.fade')").each(function() {
            totalHeight += $(this).outerHeight();
        });

        // fade out the button
        $(this).fadeOut();

        // fade out the fade div overlay
        articleDiv.find("div.fade").fadeOut();

        // animate max-height to the height of all the stuff inside the article
        articleDiv.animate({"max-height": totalHeight});
        return false;
    });
});

我添加了一個代碼筆。 我沒有在那里開戶，所以我不知道它能持續多久。 這是鏈接 。

編輯

您更新版本的代碼筆不完整。 同樣，為了幫助您使用this關鍵字，您可以嘗試以下方法。

$(document).ready(function() {
  $(".read-more").on("click", function() {
    $(this).closest(".fade").toggleClass("fade-on", "fade-off");
    $(this).closest(".article-text").css("max-height", "none");
  });
});

this關鍵字引用（在本例中）單擊的".read-more" 。 作為參考，代碼筆中的原始JavaScript是

function fadeOutOnClick() {
    $(function() {
        $('.read-more').click( function (){
            $('.fade').toggleClass('fade-on','fade-off');
            $('.article-text').css('max-height','none');
        });
    });
}

window.addEventListener("DOMContentLoaded", function() {
    fadeOutOnClick();
});      

Answer 4

您的代碼未運行的原因是您忘記包含

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但是jquery只會運行某種Web服務器，這意味着你不能只在你的本地文件夾上運行它並在你的瀏覽器中查看html。 你可以使用像Wamp這樣的東西。

CSS

<style>
.article {
    width: 80% ;
    margin: 5% auto;
    margin-top: 0;
    height: 300px;
}

h2 {
    color: #4d4d4d;
}

p {
    margin: 0 0 15px 0;
}

.article img {
    width: 40%;
    height: auto;
    float:left;
    padding: 10px 20px;
    padding-left: 0;

}

.article-text {
    text-align: justify;
    height: 125px;
    position: relative;
    overflow: hidden;
}

.article .read-more { 
    position: absolute; 
    text-align: center;  
    bottom: 0px;
    width:100%;
    text-align:center;
    padding-bottom:20px;
    background: linear-gradient( rgba(255,0,0,0), white);
}

.read-more .btn{
    padding: 10px 10px; 
}

您的HTML略有修改

<div class="content">
    <div class="article">
        <h2>The Most Popular Leg Workout for Women</h2>
        <img src="img/leg-workout.jpg">
        <div class="article-text">
            <div class="article-body">
            <p>Far far away, <strong> behind the word mountains </strong>, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth..
            Far far away, <strong> behind the word mountains </strong>, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth..</p> 
            <blockquote>"It is a shame for a man to grow old without seeing the beauty and strength of which his body is capable." - Socrates</blockquote>                  
            </div>

            <div class="read-more">
            <button class="btn" type="button">Read More</button>        
            </div>
        </div>      
    </div>

Javascript / jquery更簡單的解決方案

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 <script>

$(function() {


    totalHeight = 0;
    $(".article-text .read-more").click(function() {


            totalHeight = $(".article-body").outerHeight();

        $( ".article-text" ).animate({
        height: totalHeight
      }, 200, function() {
        // Animation complete.
      });

        $(this).fadeOut();
        $(".fade").fadeOut();

    });
});