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不会工作:(

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/