jQuery fadeOut problem

Question

Hi. I am making a site that requires the content area of the site be faded out when the user clicks a btn. The btn is a simple anchor tag. I have had some help from other S.O users on this and nearly got it working just fine. The problem I have is that it will not fade out. Here is the jquery code:

$("#show-background").click(function () {
if ($("#content-area").hasClass("bg_hidden")){
    $("#content-area")
    .removeClass("bg_hidden")
    .stop()
    .fadeIn("slow");
    $(this).text("Show Background");
          }
else{
    $("#content-area")
    .addClass("bg_hidden")
    .stop()
    .fadeOut("slow");
     $(this).text("Show Text");
          }
});

A sample can be found here www.nicklansdell.com/sample/services.html I wonder if any one can help? Many thanks in advance.

Answer 1

Why not just use toggle?

$("#show-background").click(function () {
    $("#content-area").animate({opacity: 'toggle'}, 'slow'); 
});

Answer 2

Try to fade out separately from addClass:

$("#content-area").fadeOut("slow");

BTW, you can check the button's text in the if instead of class existence...

Answer 3

I did some tries on your page with firebug and couldn't come up with what is breaking the fadeOut call.

If you need a workaround, you can do:

if ($("#content-area").hasClass("bg_hidden")){
    $("#content-area")
    .removeClass("bg_hidden")
    .stop()
    .children().fadeIn("slow");
    $(this).text("Show Background");
}else{
    $("#content-area")
    .addClass("bg_hidden")
    .stop()
    .children().fadeOut("slow");
     $(this).text("Show Text");
}

Fading in/out all the children worked on your page.

This is a work-around, not a solution.