Сделать элемент подходящим для всего родителя

Question

Я создаю расширенную панель администрирования, и я играю часть элементов редактирования, мне нравится, когда я щелкнул, чтобы отредактировать элемент, который он заполнил бы все пространство своего родителя, однако я не знаю, как вернуть элемент в исходное положение с анимацией, любая идея, как это сделать? Я попробовал это до сих пор:

Вот ручка: http://codepen.io/anon/pen/WvGONp

HTML

<div id="container"> 
    <div class="single-item"> 
     <div class="title">home</div> 
     <a class="edit" href="#"></a> 
    </div> 
    <div class="single-item"> 
     <div class="title">Gallery</div> 
     <a class="edit" href="#"></a> 
    </div> 
    <div class="single-item"> 
     <div class="title">Contact</div> 
     <a class="edit" href="#"></a> 
    </div> 
</div> 

SCSS

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    box-sizing: border-box; 
} 

html, body, #container { 
    height: 100%; 
    min-height: 100%; 
} 

#container{ 
    & > .single-item{ 
     position: relative; 
     background-color: #d9d9d9; 
     border-radius: 2px; 
     margin-bottom: 15px; 
     padding: 15px; 
     z-index: 1; 

     & > .edit{ 
      display: block; 
      position: absolute; 
      background-color: #000; 
      top: 15px; 
      right: 15px; 
      width: 20px; 
      height: 20px; 
     } 

     &.active{ 
      z-index: 2; 
     } 
    } 
} 

Javascript

$("#container").on("click", ".edit", function(e){ 
    e.preventDefault(); 

    var el = $(this); 
    var elParent = el.closest(".single-item"); 

    var curElTop = elParent.position().top; 
    var curElLeft = elParent.position().left; 

    elParent.toggleClass("active", function(){ 
     elParent.css({ 
      position: "absolute", 
      top: curElTop, 
      left: curElLeft 
     }).animate({ 
      top: 0, 
      right: 0, 
      bottom: 0, 
      left: 0 
     }); 
    }); 

}); 

Answer 1

CSS3 переход поможет вам созд ел гладкая анимация для полный экран ширина & высота.

Но если все-таки по какой-то причине, вы хотите сделать это в JQuery, вот решение:

Хотя нажав второй раз на кнопку «редактировать», вы просто должны сказать:

$("<element_reference>").removeAttr("style"); 

Он удалит стили, которые были применены ранее, верните элемент в его обычный вид.

Или вы также можете изменить положение от «абсолютного» до «статического», оба будут давать одинаковый результат. Refer this question для анимации позиции с помощью jQuery.

Надеюсь, это поможет.

Answer 2

Я обнаружил, что самый простой способ сделать такие вещи, как это:

1. Свойства перехода Put CSS по этому пункту.
2. Создайте новый класс, который вы добавляете в элемент при его нажатии, чтобы сделать его полноэкранным. Снимите класс, когда элемент закрыт.

Переходы CSS имеют тенденцию быть более быстрыми и гладкими.