CODEWITHSUNDEEP
javascriptjquery
Holabola
Holabola

Reputation: 143

jQuery Toggle Opacity On Click Using CSS Animation

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

I want to make it so when you click it once, it appears, then if you click it again, it will disappear. I wrote this, and when you first click it, it will show it, but when you click it again, it won't disappear. I just can't figure out what I'm doing wrong. XD Thank you 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 this way so I can make some nice looking css animations, so just using the toggle function wouldn't work :(

Upvotes: 4

Views: 16020

Answers (1)

Kyle Needham
Kyle Needham

Reputation: 3389

Option 1

If you want to just toggle it hidden/visible you could just do

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

Option 2

If you want to use CSS animations you can use toggleClass like this;

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

And then add your css selectors like this

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

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

Option 3

Using if statements checking opacity

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

See working fiddle of option 3 here http://jsfiddle.net/rnhV5/

Upvotes: 14

Related Questions