jQuery单击Btn淡入/淡出

问题描述

我正在一个需要btn的网站上工作，单击该btn会删除整个中间部分，以显示一个漂亮的100％背景图像.我已经设置了一个标准的HTML btn，其id为show-background，另外一个div的ID为content-area.我的jQuery代码如下所示:

I am working on a website that requires a btn that removes the entire middle section when clicked to reveal a nice 100% background image. I have set up a standard HTML btn with an id of show-background and I also a div with an id of content-area. My jQuery code looks like this:

$("a#show-background").click(function () {
    $("div#content-area").fadeOut("slow");
});

$("a#show-background").click(function () {
    $("div#content-area").fadeIn("slow");
});

这是行不通的.我想知道是否有人可以把我放在正确的位置上?提前非常感谢！

This isn't working right. I wonder if anyone can put me on the right lines? Many thanks in advance!

推荐答案

您说您的代码使用了一个按钮.由于看不到您的html，因此我假设您使用的是输入标签或按钮标签，而不是锚标签.无论如何，请尝试将选择器更改为此.

You say that your code uses a button. Since I can't see your html I'll assume you're using either an input tag or a button tag and not an anchor tag. In any case try changing your selector to this.

$("#show-background")

正如埃米尔·伊万诺夫(Emil Ivanov)所提到的，您的通话也互相取消了.解决此问题的方法是执行以下操作.假设您要隐藏的是最初显示的内容...

Also as Emil Ivanov mentioned your calls are canceling each other out. A way around this is to do the following. Assuming that what it is you're hiding is to be shown initially...

$("#show-background").click(function () {
  if ($("#content-area").hasClass("bg_hidden")){
    $("#content-area")
      .removeClass("bg_hidden")
      .stop()
      .fadeIn("slow");

    $("#show-background").text("Hide Me Text");
  }
  else{
    $("#content-area")
      .addClass("bg_hidden")
      .stop()
      .fadeOut("slow");

    $("#show-background").text("Show Me Text");
  }
});

这篇关于jQuery单击Btn淡入/淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！