Question

138

jQuery Toggle Opacity On Click Using CSS Animation

rated 0 times [ 145] [ 7] / answers: 1 / hits: 15218 / 10 Years ago, thu, february 20, 2014, 12:00:00

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 :(

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

malkajillc

Add To Favorites

Follow

Total Points: 652

Total Questions: 107

Total Answers: 98

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

malkajillc questions

1 Vitest mock modules function in only one test and use the actual function in others

Wed, Nov 2, 22, 00:00, 2 Years ago

1 How to change PrismaClient database connection at runtime?

Tue, Jun 29, 21, 00:00, 3 Years ago

1 How do I add the axios package to my chrome extension I'm working on?

Tue, Dec 15, 20, 00:00, 4 Years ago

1 How to make a bot ping a user using discord.js

Fri, Aug 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'v4' of undefined

Tue, Aug 11, 20, 00:00, 4 Years ago

View All

answered 10 Years ago carrington · Accepted Answer

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/