Question

我在html上有这个代码：

<div id="container">
   <div id="animate" class="slide">
      <p>Some paragraph.</p>                 
      <p>Some paragraph</p>
              ...
      <p>Some paragraph</p>
   </div>
</div>

和这个脚本：

$(document).ready(function(){
    var i = 1;
    document.addEventListener("click", function(){
       if (i==n) { $("#container").show(); $("#animate").addClass("slide");}
                      ...
       if (i==1) { some code;}
    });
 });

请不要介意一些代码＆＃39;因为我认为这是不相关的。

无论如何，我也在外部样式表上有这个：

.slide p{
    animation-name: slide;
    animation-duration: 1s;
    animation-timing-function: ease;
}

@keyframes slide {
    0% { transform: translateY(100%);}
    100%{ transform: translateY(0%);}
}

@-webkit-keyframes slide {
    0% { -webkit-transform: translateY(100%);}
    100% { -webkit-transform: translateY(0%);}
}

因此，当用户第n次单击他/她的鼠标时，将出现<div>并触发动画。然而，所发生的是所有段落将同时出现（因为我仍然不知道如何逐个动画）。

问题：它是否可以一次一个地动画段落（不需要进一步/额外点击），就像电影中的结尾信用一样？

修改

要澄清：我的意思是连续，这意味着，例如，第一段将出现并首先进行动画。一段时间后，它将在屏幕上消失，然后下一段将进入...依此类推。如果没有进一步点击用户，段落将一个接一个地出现并逐渐消失，直到最后一段。

Answer 1

使用JQuery的其他方式你可以尝试这个....

使用Javascript：

document.addEventListener("click", function(){
    $('#animate p:first').slideDown(1000, AnimatePara);
});

function AnimatePara(){
    $(this).slideUp(1000);

    $(this).next('p').slideDown(1000, AnimatePara);
}

CSS：

p{display:none;}

这是jsfiddle： http://jsfiddle.net/30q3gh36/3/ http://jsfiddle.net/30q3gh36/4/

使用CSS逐个显示div中的段落

1 个答案: