Crea elemento adatto all'intero genitore

Question

Sto creando un pannello di amministrazione avanzato e sto giocando la parte degli elementi di modifica, mi piace quando ho fatto clic per modificare un elemento che riempirebbe l'intero spazio del suo genitore, tuttavia io non hai idea di come riportare l'elemento alla sua posizione originale con l'animazione, qualche idea su come farlo? Ho provato questo finora:

Ecco una penna: 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 transizione vi aiuterà a cre mangiato animazione liscia per l'ampiezza dello schermo intero & altezza.

Ma se ancora per qualche motivo, si vuole farlo in jQuery, ecco la soluzione:

Mentre cliccando seconda volta sul pulsante "Modifica", devi solo dire:

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

Rimuoverà gli stili ciò che è stato applicato in precedenza, riporta l'elemento alla sua visualizzazione normale.

Oppure puoi anche cambiare la posizione da "assoluto" a "statico", entrambi ti daranno lo stesso risultato. Refer this question per l'animazione della posizione usando jQuery.

Spero che aiuti.

Answer 2

ho scoperto il modo più semplice per fare le cose come questo è:

1. proprietà di transizione Put CSS sulla voce.
2. Crea una nuova classe che aggiungi all'elemento quando viene fatto clic per renderlo a schermo intero. Togliti la classe quando l'oggetto è chiuso.

Le transizioni CSS tendono ad essere più veloci e agevoli.