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

我可能只是有点迟钝，但我似乎无法让它发挥作用。我所要做的就是，当你点击某个东西时（在本例中是，

#register

），它会改变几行css

我想让它这样当你点击它一次，它就会出现，如果你再点击它，它就会消失。我写了这个，当你第一次点击它时，它会显示出来，但当你再次点击它时，它不会消失。我只是不知道我做错了什么。XD感谢您提供的任何帮助：P

我的Javascript 编辑：我正试图以这种方式使用它，这样我可以制作一些好看的

css动画

，因此仅使用

切换功能

不起作用：（

选项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的工作小提琴此处

您是否使用了

控制台.log（）

或调试器来查看从

.css（）

返回的不透明度的实际值？

.css（）

以字符串形式返回值，但前导为零

0.9

。顺便说一句，它可能返回类似于

“0.899999761581421”的值

我假设您使用的是jQuery，那么为什么不直接使用它呢？在我看来要简单得多…看看它是否不同时进入ifs和保持可见+1，而这并不能解决

if

语句不起作用的基本问题，对于OP的应用程序，我认为这是一种更好的方法…我有一些css动画效果e、 他们仍然可以使用它吗？@user2395132请参阅我答案中的选项2这将允许CSS动画/转换。@user2395132如果您想了解如何使其按原来的方式工作，我刚刚添加了第三个选项，尽管我建议使用选项1，因为它对您的任务最有效。

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