logo标签列表

从上到下过渡不透明度文本

jqueryhtmlcss
5
我有一个`div`，高度已经给定，并且使用jQuery过渡到更高的高度。过渡到更高的`div`使用`transition`元素平滑处理。由于`div`扩展转换是线性的，并且具有0.5秒的延迟，我还使用`transition`将7行文字从`opacity: 0`过渡到`opacity:1`。然而，我希望这个转换从上到下进行（第一行比第二行稍快一点，比第三行稍快一点，以此类推），跟随`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”，但无效。这是一个很简单的问题，但却没有人提问，因此找不到答案。
1
我有一些显示/隐藏的技巧，但我不认为有一个适合你的需求。我会稍微看一下。 - Rachel Gallen
我一直在寻找方法来使 div 向上、向右、向左等过渡，但是我还没有找到任何关于实际文本的内容。欢迎任何提示！ - Pere
这个问题可能会对你有所帮助。 - Ramiz Wachtler
这可能会有所帮助 https://css-tricks.com/text-fade-read-more/ - Adam Buchanan Smith
1
FYI：p 不允许包含 div，你在这里创建了无效的 HTML。请使用 span 代替 div。 - CBroe
显示剩余6条评论
1个回答
1
"

div p div会选择描述下的所有div。

编辑：我已经制作了一个部分（使用toggle 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。
你是超级明星，谢谢！我正在学习jQuery的早期阶段，通过你的帖子我已经学到了一些东西。 - Pere
1
作为附注，我建议您使用500毫秒的间隔而不是1000毫秒。8秒对于这个动画来说是很长的时间，较短的间隔效果更好。- http://jsfiddle.net/RachGal/z1h7r7d6 - Rachel Gallen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接