, как вернуться к первоначальным значениям 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); 
      }) 

Это не работает, потому что назначили исходные значения CSS с когда that$.animate была выполнена. Как назначить значения .return щелчка, чтобы menuHolder возвращался к исходному css?

Я не хочу вручную переназначать значения. Я бы предпочел сделать это программно = D. Любая помощь будет большой.

Cheers.

Answer 1

Вот почему вы не должны изменять отдельные свойства CSS из вашего jQuery/Javascript-кода. Помимо того, что они не являются элегантными, читабельными и поддерживаемыми и не отделяют представление от поведения, это приведет к таким ситуациям, как ваш.

Вместо:

Создание классов в файле 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 остается в ваших таблицах стилей.

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

и

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

в таблице стилей:

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

Answer 3

Я согласен с другими ответами .. НО ...

Иногда добавление 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',''); 

Он будет полностью удалить стиль-свойство и выход:

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