reset changed css values

Question

I've got...

$("#menu_tl").click(function() {

    $('.page').fadeOut();
    $('.page').animate({
        "width":  "0px", 
        "height": "0px", 
        "top":    "50px", 
        "left":   "50px"
    });

    $('#page1').fadeIn();
    $('#page1').animate({
        "width":  "500px", 
        "height": "400px", 
        "top":    "-350px", 
        "left":   "-450px"
    }, 2000);
});

$("#menu_tr").click(function() {

    $('.page').fadeOut();
    $('.page').animate({
        "width":  "0px", 
        "height": "0px", 
        "top":    "50px", 
        "left":   "50px"
    });

    $('#page2').fadeIn();
    $('#page2').animate({
        "width":  "500px", 
        "height": "400px"
    }, 2000);
});

But I want to say that when the second function is clicked all altered css by the first one should be reset. This means that the following line is wrong:

$('.page').animate({
    "width":  "0px", 
    "height": "0px", 
    "top":    "50px", 
    "left":   "50px"
});

is wrong and should be replaced by a global reset. Hope this is clear enough...

c-smile · Accepted Answer · 2011-04-30 21:24:57Z

55

This

$('.page').css({"width":"", "height":"", "top": "", "left" : ""});

should do the magic for you.

answered Apr 30, 2011 at 21:24

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

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

3 Comments

Aeonius Over a year ago

yup, it does! Thank you very much! But is there a way to do it more gradually? It now just disapears in the blink of an eye.

Spork Over a year ago

Thanks! This reset my 'top' to the CSS-stylesheet-defined value when 'auto' was not what I wanted!

Ricky Levi Over a year ago

it works when using .css() but it doesn't work when using .animate(), when using .animate() it simply changing the style to width: 0px; height: 0px; which caused my <div> to disappear.... :/

hitautodestruct · Accepted Answer · 2013-01-10 08:29:53Z

3

Store the initial css values you will be changing in a variable:

var $page = $('.page'),
    initialCss = {
        width:  $page.css('width'),
        height: $page.css('height'),

        // Could also be .css('top'), .css(left')
        // depends on your initial stylesheet
        top:    $page.position().top + 'px',
        left:   $page.position().left + 'px'
    };

$("#menu_tr").click(function(){

    $page.animate( initialCss, 2000 );

});

answered Jan 10, 2013 at 8:29

hitautodestruct

21.1k15 gold badges76 silver badges96 bronze badges

Collectives™ on Stack Overflow

reset changed css values

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related