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);
  })
});

score 3 · Accepted Answer · answered Nov 18 '10 at 20:17

3

Use the children() function:

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

answered Nov 18 '10 at 20:17

robbrit

17,560
4
48
68

Thanks, Where abouts should i drop this into my code? I'm confused by the toggle. – Caius Eugene Nov 18 '10 at 20:24
ThankYou Bertrand Marron thats brilliant, although I'm having another problem, am I able to define which .children to fade out rather than all of them, and is it possible to fade in another div, in other words... I'm trying to fade out 2 divs, and fade in 2 different div's when its down. so the content when down is different t the content when up. – Caius Eugene Nov 18 '10 at 20:35
Yes, instead of going .children() do .children("selector") – robbrit Nov 21 '10 at 20:05
http://jsbin.com/ugugo3/3/ I've tried it, I've managed to fade the original div out, but I can't get the rest to work, what am i doing wrong? – Caius Eugene Nov 22 '10 at 11:24

score 1 · Answer 2 · edited May 23 '17 at 12:33

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..

edited May 23 '17 at 12:33

Community

1
1

answered Nov 18 '10 at 21:55

electblake

2,027
18
25

Thankyou for your reply, but i'm failing to understand this, I'm a very basic jQuery user, As I understand i'm assigning a class to the div with the id of 'foo', are you suggesting that I can assign a class to all the div that i want to .fadeOut() ? – Caius Eugene Nov 20 '10 at 15:12
In the above example, it actually "binds" or attaches a click event listener to every
which has a class of "foo". Now, when a
is clicked, it will add the class "bar" to any spans INSIDE THE CLICKED DIV, not all divs. Make more sense?
– electblake Nov 22 '10 at 19:15

jQuery fade content within a div

2 Answers2