Расширение делений от его первоначальной позиции по размеру экрана

Question

Это то, что я до сих пор: http://jsfiddle.net/xj4hb2kt/4/

.expandable 
    { 
     position: fixed; 
     width: 100px; 
     height: 80px; 
     background-color: black; 
     -webkit-transition: all 1200ms ease-in-out; 
     -moz-transition: all 1200ms ease-in-out; 
     -o-transition: all 1200ms ease-in-out; 
     top: 60px; 
     left: 100px; 
    } 

    .expandable-expanded 
    { 
     position: fixed; 
     width: 100%; 
     height: 100%; 
     -webkit-transform: scale(100%); 
     transform: scale(100%); 
     z-index: 5; 
     top: 0px; 
     left: 0px; 
    } 

Все работает отлично, за исключением того, что я не могу использовать «фиксированный» положение для «расширяемой» класса. Есть ли способ сделать это без установки фиксированного положения «расходного»? благодаря!

Answer 1

попробовать этот CSS

.expandable-expanded 
     { 
      top:0px; 
      left:0px; 
      position: fixed; 
      width: 100%; 
      height: 100%; 
      -webkit-transform: scale(100%); 
      transform: scale(100%); 
      z-index: 5; 
     } 

и этот JQuery

$('.expandable').click(function() { 
    var self = $(this); 
    $(this).css('top',$(this).position().top); 
    $(this).css('left',$(this).position().left); 
    setTimeout(function(){ 
     self.toggleClass('expandable-expanded'); 
     self.css('top',0); 
     self.css('left',0); 
    },100); 
}); 

это работает как ваше желание? http://jsfiddle.net/xng4pao6/1/