CODEWITHSUNDEEP
javascripthtmljquerycssjquery-animate
António Lima
António Lima

Reputation: 94

Animation not being made jquery (backgroundColor)

I'm having a problem where I'm making a function in JavaScript (JQuery):

$('.login').click( function() {

    $('#login-container').animate({

        left: 0

    }, 300, "swing", function(){

            $('#login-container').animate({

                backgroundColor: 'rgba(0,0,0,0.4)'

            }, 2000, "swing");

    });

});

Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.

I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.

The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.

Thanks in advance

EDIT:

I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:

$('.login').click( function() {

    $('#login-container').animate({

        backgroundColor: 'rgba(0,0,0,0.4)'

    }, 2000, "swing");

});

And the element does not have its background-color applied, for some reason.

Upvotes: 0

Views: 27

Answers (1)

NerdioN
NerdioN

Reputation: 79

I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.

If you want to animate this stuff, look at this documentation provided by jQuery

jQuery Animation

Upvotes: 1

Related Questions