使用CSS动画，在单击时切换jQuery透明度

Question

使用CSS动画，在单击时切换jQuery透明度

4

我可能有点蠢，但我似乎无法使它工作。我所要做的就是在点击某物（在这种情况下，#register）时更改几行CSS。

我希望点击它一次后，它会出现，然后如果您再次单击它，它将消失。我编写了以下代码，当您第一次单击它时，它会显示出来，但是当您再次单击它时，它不会消失。我真的搞不懂我错在哪里。XD 感谢您能给予的任何帮助 :P

我的JavaScript代码

$(document).ready(function () {
    $('#registerButton').click(function () {
        if ($("#register").css("opacity") === ".9") {
            $("#register").css({
                "opacity": "0"
            });
            $("#register").css({
                "height": "0px"
            });
        }

        if ($("#register").css("opacity") === "0") {
            $("#register").css({
                "opacity": ".9"
            });
            $("#register").css({
                "height": "260px"
            });
        }
    });
});

编辑： 我想要这样使用它，以便我可以制作一些漂亮的 css 动画，因此仅使用 toggle 函数 是行不通的 :(

- Holabola

你是否使用过 console.log() 或调试器来查看 .css() 返回的不透明度实际值？ - Pointy

.css() 返回的值是一个带有前导零 0.9 的字符串，顺便说一下，它可能会返回类似于 "0.8999999761581421" 的东西。 - Hashem Qolami

2

我假设你正在使用jQuery，那为什么不直接使用.toggle()呢？在我看来更简单... - Dryden Long

请检查代码，看是否没有同时进入两个if语句并保持可见。 - André Junges

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kyle Needham · Accepted Answer

选项1

如果你只想切换它的隐藏/可见性，你可以这样做：

$('#registerButton').on('click', function()
{
    $('#register').toggle();
});

选项2

如果您想使用CSS动画，可以像这样使用toggleClass；

$('#registerButton').on('click', function()
{
    $('#register').toggleClass('show hide');
});

然后按照以下方式添加您的CSS选择器

.show
{
    display: block;
    height: 260px;
}

.hide
{
    display: none;
    height:0;
}

选项3

使用if语句检查不透明度

$('#registerButton').on('click', function()
{
  var register = $('#register');

  // register is not visible lets make it visible.
  if(register.css('opacity') === '0')
  {
    register.css({
      'opacity': '0.9',
      'height': '260px'
    });
  }
  else //We know the opacity is not 0 lets make it 0.
  {
    register.css({
      'opacity': '0',
      'height': '0'
    });
  }
});

查看选项3的工作示例http://jsfiddle.net/rnhV5/