Problème jQuery fadeOut

Question

Je crée un site qui nécessite que la zone de contenu du site disparaisse lorsque l'utilisateur clique sur un btn. Le btn est une simple balise d'ancrage. J'ai reçu de l'aide d'autres utilisateurs de S.O à ce sujet et j'ai presque réussi à le faire fonctionner correctement. Le problème que j'ai est qu'il ne disparaîtra pas. Voici le code jquery:

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

se trouve un échantillon ici www.nicklansdell.com/sample/services.html~~MD~~aux~~singular~~1st Je me demande si quelqu'un peut aider? Merci d'avance.

Answer 1

Pourquoi ne pas simplement utiliser la bascule?

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

Answer 2

Essayez de fanent séparément de addClass:

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

BTW, vous pouvez vérifier le texte du bouton dans la if au lieu de l'existence de la classe ...

Answer 3

J'ai fait quelques essais sur votre page avec firebug et ne pouvait pas venir avec ce qui est rompre l'appel fadeOut.

Si vous avez besoin d'une solution de contournement, vous pouvez faire:

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

Fondu/tous les enfants ont travaillé sur votre page.

Il s'agit d'une de contournement, pas une solution.