Réinitialiser les valeurs css modifiées

Question

J'ai...

$("#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);
});

Mais je veux dire que lorsque la deuxième fonction est cliquée, toutes les modifications de style apportées par la première doivent être réinitialisées. Cela signifie que la ligne suivante est incorrecte :

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

est incorrecte et doit être remplacée par une réinitialisation globale. J'espère que c'est assez clair...

Answer 1

Cela

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

devrait faire la magie pour vous.

Answer 2

Stockez les valeurs css initiales que vous allez modifier dans une variable :

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

        // Pourrait également être .css('top'), .css(left')
        // dépend de votre feuille de style initiale
        top:    $page.position().top + 'px',
        left:   $page.position().left + 'px'
    };

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

    $page.animate( initialCss, 2000 );

});