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

Question

我可能只是迟钝，但我似乎无法让它发挥作用。我想要做的就是当你点击某些内容时（在这种情况下，#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 animations，因此只使用toggle function无效：（< / p>

Answer 1

选项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/