Question

我一直在研究这几个小时，我似乎无法弄清楚如何做到这一点 - 我是jQuery的新手。

我想淡出一个div然后淡入另一个div。我想按顺序这样做。我已经尝试在fadeOut（）函数的回调中放入fadeIn（）并对两个动画进行排队，但它们仍然没有按顺序发生。

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>

以下是我尝试的两种方法：

使用queue（）：

$("#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');   
});

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

Answer 1

第二种方法工作正常：首先淡出第一个div，然后在回调淡出另一个。

检查我的JSFiddle并自己查看。

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

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

将所有障碍放在一边这应该有效：

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

Answer 2

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

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

Answer 3

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

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

jQuery：在不同元素上排队fadeIn（）和fadeOut（）

3 个答案: