Question

我正在开发一个网站，需要一个btn，在点击时会移除整个中间部分，以显示一个漂亮的100％背景图像。我已经设置了一个标准的HTML btn，其id为show-background，我也是一个id为content-area的div。我的jQuery代码如下所示：

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

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

这不行。我想知道是否有人能把我放在正确的位置？非常感谢提前！

Answer 1

像Emil Ivanov写的那样，两个事件处理程序相互推出，所以如果你想用同一个锚切换div的可见状态，请使用切换方法：

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

Answer 2

你的意思是切换？

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

Answer 3

尝试类似这样的事情，目前你正在隐藏/显示同时没有任何结果：

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

如果它是可见的，则会隐藏，显示它是不是......如果在中途点击，则停止当前动画并开始向另一个方向移动。

Answer 4

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

$("#show-background")

同样，Emil Ivanov提到你的电话互相取消。解决这个问题的方法是执行以下操作。假设你隐藏的是最初显示的......

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

Answer 5

如果你想达到相同的淡入/淡出效果

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

会这样做..

Answer 6

jQuery 1.4.4或更高版本可以使用

$('#show-background').click(function () {
    $('div#content-area').fadeToggle('slow');       
});

Jquery Click Button淡入/淡出

6 个答案: