无法在 jquery 中链接动画

发布于 2024-08-19 11:32:33 字数 482 浏览 3 评论 0原文

我有一个使用 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 都同时被动画化，我不可能明白为什么。

原文

I have a list which is hidden using css code {display:none;}

now i am using the jquery code to animate the list (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});
  }

I need to animate the items one after the other

there's an example in this page

but all the li's are being animated all at once and i cannot possibly see why.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绮筵 2024-08-26 11:32:33

只需使用这个即可：

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。

Just use this instead:

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();

Basically it grabs all the lis, and then one by one animates them in. At the same time, each iteration removes the first element from the list. If you wanted it to animate the other way around, replace both occurances of :first with :last.

回复收藏 0 原文

~没有更多了~