CODEWITHSUNDEEP
javascriptjquerycss
dopatraman
dopatraman

Reputation: 13908

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

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.

Upvotes: 2

Views: 2466

Answers (3)

user950658
user950658

Reputation:

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>

Upvotes: 4

kapa
kapa

Reputation: 78741

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

Upvotes: 9

Eelke
Eelke

Reputation: 2327

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%;
}

Upvotes: 3

Related Questions