Question

我有ul并希望动画li元素，例如它们从底部向上移动，一个在花药之后或逐个移动

        <ul class="answers">
    <li class="answer"><a href="#" class="expand">click</a>
<p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
   </li>
    <li class="answer"><a href="#" class="expand">click</a>
<p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
   </li>

  <li class="answer"><a href="#" class="expand">click</a>
<p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
  </li>

   <li class="answer"><a href="#" class="expand">click</a>
<p>adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
    fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki</p>
   </li>

    </ul>

      ul{list-style:none;}
       li{ width:100%; height:20px; overflow:hidden; position:relative; top:9999999999999px;}

   $(document).ready(function(){
       $('.answer').animate({
        top:"0px"
        },5000);
       });

我该怎么做

Answer 1

假设您的代码中没有任何错误。

这样的事情应该有效

$(document).ready(function(){

   var delay-time = 600;

   $('.answer').each(function() {

       $(this).delay(delay-time).animate({top:"0px"},5000);

       delay-time += 600;

   });

});

此代码将循环遍历每个.answer元素。每个延迟都会增加，这将使它们不会同时生成动画，但会一个接一个地动画。将延迟时间调整为最适合您的毫秒数。

如何一个接一个地动画li元素

1 个答案: