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

Answer 2

我同意其他答案..但是......

有时需要在脚本中添加css。例如，动画或设置动态css属性时。

.addClass（）与.css（）之间的差异

.addClass()实际上为它添加了一个类和CSS。

.css()将CSS添加到代码

实施例

<!-- default -->
<div></div>
<!-- added class -->
<div class="added-class"></div>
<!-- added css -->
<div style="height:100px"></div>

更改它的方法是将属性留空。

$(selector).css('height','');

它将完全删除style-property并输出：

<!-- removed css -->
<div></div>

Answer 3

实现此目的的最佳方法是添加一个类，您可以在需要还原原始CSS时将其删除。这使得维护更容易，所有CSS都保留在样式表中。

$('#menuHolder').addClass('animate')

和

$('#menuHolder').removeClass('animate')

样式表中的

：

.animate {
left:0px;
top:0px;
height:100%;
width:100%;
}

如何在.css（）方法之后恢复到原始的css值

3 个答案: