jQuery淡入淡出DIV内的内容

Question

你好，目前我有这个代码，它可以将我的页脚向下和向上切换，但是当它被切换到下方时，我希望页脚的内容能够淡出并且新的内容淡入。

我无论如何都想不出怎么做，请帮忙！- 谢谢

$(document).ready(function() {
  $('#footertab').toggle(function() {
    $('#footer').animate({
      bottom: '-=120'
    }, 1000);
  },function() {
    $('#footer').animate({
      bottom: '+=120'
    }, 1000);
  })
});

- Caius Eugene

Answer 1

使用children()函数：

$("#footer").children().fadeOut();

- robbrit

---

谢谢，我应该把这个放在我的代码哪里？我对切换开关感到困惑。 - Caius Eugene

谢谢Bertrand Marron，这很棒，不过我还有另外一个问题，我能定义要淡出哪个.children而不是全部吗？ 另外，是否可以淡入另一个div？换句话说...我试图在下降时淡出2个div，并淡入2个不同的div，在下降时内容不同于上升时的内容。 - Caius Eugene

是的，与其使用.children()，请使用.children("选择器")。 - robbrit

http://jsbin.com/ugugo3/3/ 我已经尝试过了，我成功地将原始div淡出，但我无法让其他部分工作，我做错了什么？ - Caius Eugene

Answer 2

你可能想研究一下jQuery选择器的第二个参数——"选择器上下文"。这是在特定上下文内寻找元素的好方法。

以下示例会为被点击div中的span添加一个'class'类名：

$('div.foo').click(function() {
  $('span', this).addClass('bar');
});

（来自API文档）

在内部，选择器上下文是通过.find()方法实现的，因此$('span', this)等同于$(this).find('span')。

进一步阅读..

• jQuery API文档关于“选择器上下文”的说明
• 有关jQuery和子元素的先前Stack Overflow问题

- electblake

---

谢谢您的回复，但我还是不明白。我只是一个非常基本的 jQuery 用户。据我理解，我正在为具有ID“foo”的 div 分配一个类，您是否建议我可以为所有我想要 .fadeOut() 的 div 分配一个类？ - Caius Eugene

在上面的例子中，它实际上将一个点击事件监听器“绑定”或附加到每个具有“foo”类的<div>。现在，当单击<div class="foo">时，它将向所单击的<div>内的任何<span>添加“bar”类，而不是所有<div>。更有意义了吗？ - electblake