how to revert to original css values after .css() method

Question

I have an element I am changing with an animation as follows:

that$.animate({
                    opacity:'0.0'
                },300,
                function() {
                    $('#menuHolder').css({
                        left:'0px',
                        top:'0px',
                        height:'100%',
                        width:'100%',
                    },0);

This is meant to make menuHolder take up the whole screen. When clicking a separate button, I want menuHolder to revert to the original values i assigned in the style sheet. Here is the code for the return button:

$('.return').bind('click',
        function() {
            $(this).hide(300);

            tMT$ = $(this).parent();

            tMT$.animate({
                opacity:'0.0'
            },300,
            function() {
                $('#menuHolder').css({
                    left:$(this).style.left,
                    top:$(this).style.top,
                    height:$(this).style.height,
                    width:$(this).style.width
                },0);
            })

This doesnt work, because I have assigned the original css values with when that$.animate was executed. How should I assign the values of .return's click so that menuHolder reverts to its original css?

I don't want to manually reassign values. I would rather do it programmatically =D. Any help would be great.

Cheers.

kapa · Accepted Answer · 2011-12-24 00:37:57Z

9

That is why you should not change individual CSS properties from your jQuery/Javascript code. Other than not being elegant, readable and maintainable and not separating presentation from behaviour, it will lead to situations like yours.

Instead:

Create classes in your CSS file:

.full-screen { left: 0; top: 0; width: 100%; height: 100%; }

and only use jQuery/Javascript to add/remove them:

$('#menuHolder').addClass('full-screen');
...
$('#menuHolder').removeClass('full-screen');

jQuery Class Manipulation Methods

edited Dec 24, 2011 at 0:37

answered Dec 24, 2011 at 0:31

kapa

78.9k21 gold badges166 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user950658 · Accepted Answer · 2011-12-24 00:58:51Z

4

I agree with the other answers.. BUT...

Sometimes adding css in the script is required. For example, when animating or setting dynamic css properties.

Differences between .addClass() and .css()

.addClass() actually adds a class and the CSS for it.

.css() adds the CSS to the tag

Example

<!-- default -->
<div></div>
<!-- added class -->
<div class="added-class"></div>
<!-- added css -->
<div style="height:100px"></div>

the way to change it back is to just leave the property empty.

$(selector).css('height','');

It will remove the style-property completely and output:

<!-- removed css -->
<div></div>

answered Dec 24, 2011 at 0:58

user950658

7 Comments

kapa Over a year ago

He is not doing animations (uses that "thing" in the callback), he is doing something that is a typical "use classes" scenario.

user950658 Over a year ago

Yes I can see that from his code snippet, but I think this is still a correct answer to his question. Read my answer.. "sometimes... is required"... all I'm saying is that there is a way to completely remove the styles added by a script... and that was the actual question, right?

kapa Over a year ago

It is an answer, yes. It works. It is very rarely required, and I consider it bad practice. That is why I only added a comment and have taken no other action.

user950658 Over a year ago

why do you consider it bad practice? just to get this right... i am really interested.

kapa Over a year ago

Because of separation of concerns. In Javascript, you set your item into a specific state that is required by the logic of your program. The visual description of that state belongs to the stylesheet. When your code gets a bit more complicated, you will see the benefits.

|

Eelke · Accepted Answer · 2011-12-24 00:35:21Z

3

Best way to accomplish this is by adding a class, which you can remove when you want the revert the original CSS. This makes it also easier to maintain, all the CSS stays in your stylesheets.

$('#menuHolder').addClass('animate')

and

$('#menuHolder').removeClass('animate')

in your stylesheet:

.animate {
left:0px;
top:0px;
height:100%;
width:100%;
}

answered Dec 24, 2011 at 0:35

Eelke

2,3271 gold badge22 silver badges26 bronze badges

Collectives™ on Stack Overflow

how to revert to original css values after .css() method

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related