jquery - 从上到下过渡不透明文本

Question

我有一个 div，具有给定的 height，它使用 jQuery 转换到更大的 height。过渡到更高的 div 使用 transition 元素平滑。由于 div 扩展过渡是 线性，延迟 0.5 秒，我还使用 transition 从 移动 7 行文本不透明度:0 到 不透明度:1。但是，我希望这个转换从上到下(第 1 行比第 2 行快一点，比第 3 行快一点，等等)，在 div 转换之后，而不是一次所有行一次。怎么做？代码如下:

    $("small").on("click", function() {
      $(".post1").toggleClass("show-post");
    });
    
  

.post1 {
  border: 1px solid grey;
  margin: 20px auto;
  width:33%;
  height:125px;
  padding:0 10px;
  border-radius:4px;
  background:#FFFFFF;
  color:black;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
}

.descr {
  opacity:0;
}

small {
  position:relative;
  left:300px;
  bottom:30px;
}

.show-post {
  height:350px;
}

.show-post .descr{
  opacity:1;
  transition:opacity 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post1">
    <h4>THis is a concert</h4>
    <p>Where: XYZ Arena</p>
    <p>When: XYZ h</p>
    <small>(Click to expand)</small>
    <p class="descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  

更新:

现在我的代码是这样的:

 <script>
    $("small").on("click", function() {
      $(this).parent().toggleClass("show-post");
      $(".first").animate({'opacity':1}, 1000);
      $(".second").animate({'opacity':1}, 2000);
      $(".third").animate({'opacity':1}, 3000);
      $(".fourth").animate({'opacity':1}, 4000);
      $(".fifth").animate({'opacity':1}, 5000);
      $(".sixth").animate({'opacity':1}, 6000);
      $(".seventh").animate({'opacity':1}, 7000);
      $(".eight").animate({'opacity':1}, 8000);
    });
    
  </script>

.descr {
  opacity:0;
}

.first, .second, .third {
  opacity:0;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post">
    <h4>THis is a concert</h4>
    <p>Where: XYZ Arena</p>
    <p>When: XYZ h</p>
    <small>(Click to expand)</small>
    <p class="descr">
      <div class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </div><div class="second">do eiusmod temporincididunt ut labore et dolore magna </div><div class="third">aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div><div class="fourth"> ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="fifth"> Duis aute irure dolor in reprehenderit in voluptate velit esse </div><div class="sixth">cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat </div><div class="seventh">cupidatat non proident, sunt in culpa qui officia deserunt mollit </div><div class="eight">anim id est laborum.</div>
    </p>
  </div>

我还没有在 css 代码中添加所有 class 但我可以看到它有效，因为我可以为每一行的每个转换设置不同的时间。现在，这里有一个新手问题:如何选择 .descr 下的所有 div，而不必创建额外的 css 元素并引用它下面的每个单独的 .class:.first, .second, .third.尝试了 .descr, div 但不起作用。这是一个如此简单的问题，没有人问，因此找不到答案。

Answer 1

div p div 将选择 descr 下的所有 div。

编辑:我制作了一个有效的部分(带有切换 css 和重复动画)

我使用段落而不是 div 来表示你的行和一个部分来容纳它们。

$("small").on("click", function () {

    $(this).parent().toggleClass("show-post");
    if ($(this).parent().hasClass ("show-post") && ($('.show-post').css('height') == '500px')) {
    $(".first").animate({
        'opacity': 1
    }, 1000);
    $(".second").animate({
        'opacity': 1
    }, 2000);
    $(".third").animate({
        'opacity': 1
    }, 3000);
    $(".fourth").animate({
        'opacity': 1
    }, 4000);
    $(".fifth").animate({
        'opacity': 1
    }, 5000);
    $(".sixth").animate({
        'opacity': 1
    }, 6000);
    $(".seventh").animate({
        'opacity': 1
    }, 7000);
    $(".eight").animate({
        'opacity': 1
    }, 8000);

} else if (!$(this).parent().hasClass ("show-post")) {
    $(".first").animate({
        'opacity': 0
    }, 1000);
    $(".second").animate({
        'opacity': 0
    }, 2000);
    $(".third").animate({
        'opacity': 0
    }, 3000);
    $(".fourth").animate({
        'opacity': 0
    }, 4000);
    $(".fifth").animate({
        'opacity': 0
    }, 5000);
    $(".sixth").animate({
        'opacity': 0
    }, 6000);
    $(".seventh").animate({
        'opacity': 0
    }, 7000);
    $(".eight").animate({
        'opacity': 0
    }, 8000);

}
});

div section p {
  opacity: 0;
}
.post {
    border: 1px solid grey;
    margin: 20px auto;
    width:200px;
    height:155px;
    padding:0 10px;
    border-radius:4px;
    background:#FFFFFF;
    color:black;
    transition: height 0.5s;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    overflow:hidden;
}

.show-post {
    height:500px;
    opacity:1;
    transition:opacity 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post">
  <h4>This is a concert</h4>
  <p>Where: XYZ Arena</p>
  <p>When: XYZ h</p>
  <small>(Click to expand)</small>
  <section class="descr">
    <p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p>
    <p class="second">do eiusmod temporincididunt ut labore et dolore magna</p>
    <p class="third">aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
    <p class="fourth">ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p class="fifth">Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
    <p class="sixth">cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
    <p class="seventh">cupidatat non proident, sunt in culpa qui officia deserunt mollit</p>
    <p class="eight">anim id est laborum.</p>
  </section>
</div>

这是一个fiddle