jquery - 无法在 jquery 中链接动画

Question

我有一个使用 css 代码 {display:none;} 隐藏的列表

现在我正在使用 jquery 代码来动画列表(li's)

var numb = $("ol#update li").length;
 for(j=0; j < numb; j++) {                    
  $("ol#update li").eq(j).animate({
    height: 'show',
opacity: 'show'
}, {duration:1000});
  }

我需要一个接一个地为项目设置动画

这里有一个例子page

但是所有的 li 都同时被动画化，我不明白为什么。

Answer 1

只需使用这个即可:

var $li = $("ol#update li");
function animate_li(){
   $li.filter(':first')
      .animate({
         height:  'show',
         opacity: 'show'
      }, 1000, function(){
        animate_li();
      });
  $li = $li.not(':first');
}
animate_li();

基本上它会抓取所有的li，然后一个一个地对它们进行动画处理。同时，每次迭代都会从列表中删除第一个元素。如果您希望它以相反的方式设置动画，请将两次出现的 :first 替换为 :last。