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

我的作品的密码笔：https://codepen.io/anamolshres55/pen/bKXEoO

Answer 1

一个更简单的版本呢？

编辑max-height中的.article-text，以更改预览文本的大小。

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

我添加了一支数字笔。我那里没有帐户，所以我不知道它能存多久。这是link。

编辑

您的更新版本的代码笔不完整。同样，为了帮助您使用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();

    });
});

如何在点击功能上淡出文字？

4 个答案: