jQuery fadeOut问题

Question

我正在创建一个网站，当用户点击btn时，该网站需要淡化网站的内容区域。 btn是一个简单的锚标签。我得到了其他S.O用户的一些帮助，几乎让它工作得很好。我遇到的问题是它不会淡出。这是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");
          }
});

可以在这里找到样本www.nicklansdell.com/sample/services.html我想知道是否有人可以提供帮助？非常感谢提前。

Answer 1

为什么不直接使用切换？

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

Answer 2

尝试与addClass分开淡出：

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

顺便说一下，你可以查看if中按钮的文字，而不是班级......

Answer 3

我使用firebug在您的网页上进行了一些尝试，无法提出违反fadeOut电话的内容。

如果您需要解决方法，可以执行以下操作：

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

淡入/淡出您页面上工作的所有孩子。

这是解决方法，而不是解决方案。