Jquery 重置更改的css值

我有

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

但是我想说的是，当点击第二个函数时，第一个函数修改的所有css都应该重置。这意味着以下行是错误的：

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

错误，应该用全局重置来替换。希望这足够清楚…

这

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

---

应该会为您带来奇迹。

将您将要更改的初始css值存储在一个变量中：

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 );

});

---

是的，的确如此！非常感谢你！但是，有没有一种方法可以更渐进地做到这一点？它现在一眨眼就消失了。谢谢！当“auto”不是我想要的时，这会将我的“top”重置为CSS样式表定义的值！它在使用

.css（）

时起作用，但在使用

.animate（）

时不起作用，在使用

.animate（）

时，它只需将样式更改为

宽度：0px；高度：0px

消失的代码>：/