jQuery 重置更改的 css 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5844571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
reset changed css values
提问by Aeonius
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:
但我想说的是，当第二个函数被点击时，第一个函数改变的所有 css 都应该被重置。这意味着以下行是错误的：
$('.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...
是错误的，应该被全局重置所取代。希望这足够清楚...
回答by c-smile
This
这个
$('.page').css({"width":"", "height":"", "top": "", "left" : ""});
should do the magic for you.
应该为你做魔法。
回答by hitautodestruct
Store the initial css values you will be changing in a variable:
将您将要更改的初始 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 );
});
