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


Tags: javascript,jquery,css

Problem :

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.



Solution :

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


    CSS Howto..

    how to allow transform in htmlpurifier

    How to remove “pictureframe” in Internet Explorer?

    CSS: how to make a horizontal images scroller with two images per column?

    how to fix height:auto css

    How to change dropdownlist width to 100% using CSS

    How do I keep text from wrapping under an element which floats to its left?

    How to add a background to a boostrap grid row (including padding!)?

    Three column responsive equal height, with border. How to make it in CSS?

    How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?

    CSS How to attach input box to bottom of divider window

    How to expand link on hoover? Add “<” “>” symbols around link?

    How to toggle visibility of 2 divs after clicking a mailto link?

    CSS preprocessors workflow - how does it really work?

    How to Draw Kundli Design (diamonds and triangles in square) using HTML and CSS?

    How can I make a table column width somewhat similar automatically?

    How to let the browser cache css and js files for a https site?

    html/css - using sprite with tag - how to remove the outline in Chrome?

    How to simulate \hfill with HTML and CSS?

    How to apply IE Fixes for LESS CSS [closed]

    How do I target nested elements with CSS correctly? [closed]

    How do align images vertically centers with CSS and HTML?

    How do I get text to go in the middle of a div? [duplicate]

    how to get both icon and heading in same line in css

    How to prevent Float contents overlap other contents below

    How to format date elements (year, month, date) individually with CSS and Rails i18n?

    How to make two buttons in column?

    How to implement a CDN failsafe for css files?

    How to add js and css files in ASP.net Core?

    Internet Explorer 10 menu item shows focus outline unexpectedly

    How to get the values of the css style attributes in gwt