jQuery：在不同元素上排队淡入（）和淡出（）答案

【问题标题】：jQuery: Queuing fadeIn() and fadeOut() on different elementsjQuery：在不同元素上排队淡入（）和淡出（）
【发布时间】：2011-04-10 23:31:11
【问题描述】：

我已经为此工作了几个小时，但我似乎无法弄清楚如何做到这一点 - 我是 jQuery 新手。

我想淡出一个 div，然后淡入另一个。我想按顺序执行此操作。我已经尝试将fadeIn() 放在fadeOut() 函数的回调中并将两个动画排队，但它们仍然没有按顺序发生。

HTML：

<article id="foo">
    <div>one set of content, initially set to "display: block;"</div>
    <div id="bar">second set of content, initially set to "display: none;"</div>
    <div id="menu">the menu, which I don't want to fade</div>
</article>

这是我尝试过的两种方法：

使用队列（）：

$("#foo div:not(#bar, #menu)").queue( function() {
    $(this).fadeOut('slow');
$(this).dequeue();
$("#foo div#bar").fadeIn('slow')    
});

使用回调：

$("#foo div:not(#bar, #menu)").fadeOut('slow', function() {
    $("#foo div#bar").fadeIn('slow');   
});

这应该相对简单，因为它是我在许多网站上看到的 - 我做错了什么？

【问题讨论】：

你的 html 是什么样的？可能有不同的方法可以让事情变得更容易......
使用回调会发生什么？我个人在这种方法上取得了成功。退房：paulirish.com/2008/… 一个也许。
我的 HTML 是：
...一组内容，最初设置为“display:block;”

... 第二组内容，最初设置为“display: none;”

...菜单，我不想褪色
如果是复制粘贴代码，使用回调的部分有错误，第3行应该是});而不是 )};
每个块的选择器看起来很奇怪。我会做 $("#foo") 和 $("#bar")

标签： jquery callback queue fadein fadeout

【解决方案1】：

第二种方法效果很好：首先淡出div，然后在回调中淡入另一个。

查看我的JSFiddle 并亲自查看。

如果您的代码不起作用，我建议您检查您的代码，因为您提供的代码肯定是无效：

您的结束括号的顺序无效：}) 而不是您的)}
您的第二个选择器（用于淡入）应该是$("#foo div#bar")，否则什么都不会淡入，因为您没有带有class="foo" 而是id="foo" 的元素。

把所有的障碍都放在一边这应该可行：

$("#foo div:first").fadeOut("slow", function(){
    $("#foo #bar").fadeIn("slow");
});

【讨论】：

嗨 - 感谢您的帮助。代码没有复制/粘贴，所以这些只是拼写错误；它们不在我使用的代码中。尽管我很欣赏它应该起作用，并且您的示例确实起作用，但它对我不起作用。我在 click() 函数中有这个，在 #(document).ready() 中有这个 - 它们中的任何一个都会改变结果吗？
@daysrunaway：使用 Firebug 调试您的代码。在函数内的第一句（以及异步执行的匿名句）上设置断点并查看发生了什么。检查你的 jQuery 选择器，它们实际上有任何元素等。调试是你的朋友。
嗨罗伯特 - 我使用了 Firebug，但找不到任何东西。 jQuery 选择器都有元素。我通过在 div:not(#bar, #menu) 上使用 .hide(0, callback) 并将 .fadeIn() 放在回调函数中找到了一个替代修复 - 它看起来不太好，但它可以完成工作。不过我还有一个问题：现在，每当我在fadeIn() 函数完成（700 毫秒）之前执行click() 函数时，两个内容
都会短暂闪烁。有没有办法防止这种情况发生？
您的代码一定有严重错误。您是否逐行尝试过我的代码？你的选择器在这里做错了。或者！您的 DIV 元素具有某种样式，这会阻止它按预期工作（如display:none!important; 或类似的东西）。我提供的代码有效。 HSFiddle 的例子也证明了它也是如此。您的代码或 css 或两者都有问题。
我想不通 - 我已经经历了好几次了。它可能是我用于网站 (html5reset.org) 的 Richard Clark 的 HTML5 Reset 中的一种风格吗？

【解决方案2】：

也许重试您的第二种方法？它对我有用。我在stackoverflow上的开发控制台中运行了它，它按预期工作，首先淡出这个问题的标签，然后是stackoverflow徽标：

$(".tagged").fadeOut('slow', function () { $("#hlogo").fadeOut('slow'); });

【讨论】：

不幸的是，这对我不起作用 - 这些函数肯定不会按顺序运行，因为我可以看到每个 div 的全部内容持续 600 毫秒（“慢”）。

【解决方案3】：

$("#foo").fadeOut('slow', function () {$("#bar").fadeIn('slow');});

是的，这不适合那个 HTML，请参阅 Rob 的回答

【讨论】：

这行不通，因为你会让容器不可见，因此无论如何子元素都不会可见。
@Rob 我知道，HTML 不存在我写的时候，不知道它是如何设置的。