title: how to animate li elements one after another
body: <p>i have ul and want to animate li elements like they move from bottom to up and one after anther or one by one</p>
  
  <pre><code>        &lt;ul class="answers"&gt;
      &lt;li class="answer"&gt;&lt;a href="#" class="expand"&gt;click&lt;/a&gt;
  &lt;p&gt;adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
      fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki&lt;/p&gt;
     &lt;/li&gt;
      &lt;li class="answer"&gt;&lt;a href="#" class="expand"&gt;click&lt;/a&gt;
  &lt;p&gt;adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
      fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki&lt;/p&gt;
     &lt;/li&gt;
  
    &lt;li class="answer"&gt;&lt;a href="#" class="expand"&gt;click&lt;/a&gt;
  &lt;p&gt;adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
      fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki&lt;/p&gt;
    &lt;/li&gt;
  
     &lt;li class="answer"&gt;&lt;a href="#" class="expand"&gt;click&lt;/a&gt;
  &lt;p&gt;adasdanvljskljfklsdklfsdjfkljsdkljfklsdjklfjskldjfklsdjklfjsdkfjksjdklfjs;dfl;sdkf
      fsdfsdfsdfsfhowerjweklfjifjvjdfioverjgfioqwopiropqieopki&lt;/p&gt;
     &lt;/li&gt;
  
      &lt;/ul&gt;
  
        ul{list-style:none;}
         li{ width:100%; height:20px; overflow:hidden; position:relative; top:9999999999999px;}
  
     $(document).ready(function(){
         $('.answer').animate({
          top:"0px"
          },5000);
         });
  </code></pre>
  
  <p>how can i do that</p>