animate的使用问题
例如我有一个清单 复制代码
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
并像这样调用它:
filterList($('#applications > li:first'), $('#applications > li.app'));
And call it like:
filterList($('#applications > li:first'), $('#applications > li.app'));