javascript - 如何在 .css() 方法之后恢复原始 css 值

Question

我有一个元素正在通过动画进行更改，如下所示:

that$.animate({
                    opacity:'0.0'
                },300,
                function() {
                    $('#menuHolder').css({
                        left:'0px',
                        top:'0px',
                        height:'100%',
                        width:'100%',
                    },0);

这是为了让menuHolder占据整个屏幕。单击单独的按钮时，我希望 menuHolder 恢复为我在样式表中分配的原始值。这是返回按钮的代码:

$('.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);
            })

这不起作用，因为我在执行 that$.animate 时分配了原始 css 值。我应该如何分配 .return 点击的值，以便 menuHolder 恢复到其原始 css？

我不想手动重新分配值。我宁愿以编程方式完成=D。任何帮助都会很棒。

干杯。

Answer 1

这就是为什么您不应该从 jQuery/Javascript 代码更改单个 CSS 属性。除了不优雅、可读性和可维护性以及不将表示与行为分开之外，它还会导致像您这样的情况。

相反:

在 CSS 文件中创建类:

.full-screen { left: 0; top: 0; width: 100%; height: 100%; }

并且仅使用 jQuery/Javascript 来添加/删除它们:

$('#menuHolder').addClass('full-screen');
...
$('#menuHolder').removeClass('full-screen');

jQuery Class Manipulation Methods