jQuery fade content within a div

Question

Hey there, so far i have this, it toggles my footer down and up, but i want the content of the footer to fade out and new content fade in when it's toggled down. I can't for the life of me work it out, please help! - thanks

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

Answer 1

You may want to look into the 2nd parameter of the jQuery selector - "Selector Context", which is a great shorthand for searching for elements within a context.

The following would add a class of 'bar' to the span contained within a clicked div:

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

(from api documentation)

Internally, selector context is implemented with the .find() method, so $('span', this) is equivalent to $(this).find('span').

Further Reading..

• jQuery API Doc on "Selector Context"
• Previous Stack Overflow Question about jQuery & Chilren

Answer 2

Use the children() function:

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