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.icklansdell.com/ sample /services.html我想知道是否有人能帮上忙？在此之前，非常感谢您。

Answer 1

为什么不直接使用toggle呢？

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

淡入/淡出所有的孩子都在你的页面上工作。

这是一种变通办法，而不是解决方案。