animate的使用问题

发布于 2024-10-02 21:51:40 字数 1582 浏览 4 评论 0原文

例如我有一个清单 复制代码

   1.  <ul id="applications">
   2.       <li id="id-1" class="util"></li>
   3.       <li id="id-1" class="app"></li>
   4.       <li id="id-1" class="util"></li>
   5.       <li id="id-1" class="app"></li>
   6. </ul>

然后我想要选择一些具有动画效果的列表, 首先所有元素都会消失, 然后我想要的元素就会一一显示出来 代码: 复制代码

   1. $('#applications li').each(function (index) {       
   2.       setTimeout(function (e) {
   3.                       e.hide("slow");
   4.                        }, index * 100, $(this));
   5.              });
   6. $('#applications li[class="app"]').each(function (index) {
   7.        setTimeout(function (e) {
   8.                      e.fadeIn("fast");
   9.                      }, index * 100, $(this));
  10.              });

最终效果是所有元素先消失 但我想要的元素没有显示?为什么?

然后我考虑队列,在使用它之前我对代码做了一些更改: 复制代码,

   1. $('#applications li').each(function (index) {       
   2.       setTimeout(function (e) {
   3.                       e.hide("slow");
   4.                        }, index * 100, $(this));
   5.              });
   6. $('#applications li').each(function (index) {
   7.        setTimeout(function (e) {
   8.                      e.fadeIn("fast");
   9.                      }, index * 100, $(this));
  10.              });

与前一个不同的部分是 $('#applications li[class="app"]') 变成了 $('#applications li'), 效果是所有元素都会首先消失, 然后所有的都会再次显示,没有任何问题!

为什么会出现这种情况?有什么方法可以解决这个问题吗?或者达到我想要的效果 非常感谢!!

I have a list for example
Copy code

   1.  <ul id="applications">
   2.       <li id="id-1" class="util"></li>
   3.       <li id="id-1" class="app"></li>
   4.       <li id="id-1" class="util"></li>
   5.       <li id="id-1" class="app"></li>
   6. </ul>

then I want a select some of the list with some animate effect,
first the all of the elements would disappear,
then the elements that I wanted would display one by one
the code:
Copy code

   1. $('#applications li').each(function (index) {       
   2.       setTimeout(function (e) {
   3.                       e.hide("slow");
   4.                        }, index * 100, $(this));
   5.              });
   6. $('#applications li[class="app"]').each(function (index) {
   7.        setTimeout(function (e) {
   8.                      e.fadeIn("fast");
   9.                      }, index * 100, $(this));
  10.              });

the final effect is that all the elements would disappear first
but the element I wanted would not display?why?

then I think about the queue,before I use it I change a little about the code:
Copy code

   1. $('#applications li').each(function (index) {       
   2.       setTimeout(function (e) {
   3.                       e.hide("slow");
   4.                        }, index * 100, $(this));
   5.              });
   6. $('#applications li').each(function (index) {
   7.        setTimeout(function (e) {
   8.                      e.fadeIn("fast");
   9.                      }, index * 100, $(this));
  10.              });

the different part from the former one is that $('#applications li[class="app"]') become $('#applications li'),
the effect is that all the elements would disappear first,
then all the would display again without any problem!

why this happened?Are there some ways to solve the problem?Or achieve the effect I wanted
Thank a lot!!

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

青衫负雪 2024-10-09 21:51:40
function filterList($el, $filter) {
    $el.fadeOut(1000, function() { 
        if($el.next().length > 0) {
            filterList($el.next(), $filter)
        } else {
            $filter.fadeIn();
        }
    });
}

并像这样调用它: filterList($('#applications > li:first'), $('#applications > li.app'));

function filterList($el, $filter) {
    $el.fadeOut(1000, function() { 
        if($el.next().length > 0) {
            filterList($el.next(), $filter)
        } else {
            $filter.fadeIn();
        }
    });
}

And call it like: filterList($('#applications > li:first'), $('#applications > li.app'));

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文