Geek asks and answers

JQuery Toggle opacity on click using CSS animation

I'm probably just retarded, but I can't get this to work. All I am trying to do is to do so when you press something (in this case #register), it changes a few lines of css.

I want to do this, when you press it once, it will appear, and then if you press it again, it will disappear. I wrote this, and when you first press it, it will show it, but when you press it again, it will not disappear. I just can't understand what I'm doing wrong. XD Thanks for any help you can give: P

My 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"
            });
        }
    });
});

EDIT: I'm trying to use it in such a way that I can make it look nice css animations, so I just ca toggle functionn't use it :(

+3
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/

+5

More articles:


All Articles