Question

I have a div, with a given height, that transitions to a bigger height using jQuery. Transition to taller div is smoothed with transition element. Since div expansion transition is linear, with a delay of .5 s, I also use transition to shift 7 lines of text from opacity: 0 to opacity:1. However, I want this transition to go top to down (line 1 a bit faster than line 2, a bit faster than line 3, etc.), following div transition, instead of all lines at once at once. How to do that? Code below:

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

Update:

Now my code looks like:

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

I haven't added yet all class in the css code but I can see that it works because I can set a different timing for each transition for each line. Now, here goes a rookie question: how can I select all divs under .descr without having to create an extra css element and referring to each individual .class under it: .first, .second, .third. Tried .descr, div but doesn't work. And it's such an easy question that no one asks it and, therefore, can't find answer.

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

Transition opacity text top to down

1 个答案: