Jquery clickable анимация размера. Максимизация div над другими

Question

Я не могу найти решение моей проблемы. Итак, у меня есть крутая идея создать привлекательную пользовательскую панель, но не могу понять, как сделать сделать работу jquery правильной;). Вот вещь:

html: 
<div id="content"> 
<div id="containerleft"> 
<div id="box1" class="box"></div> 
<div id="box2" class="box"></div> 
<div id="box3" class="box"></div> 
<div id="box4" class="box"></div> 
<div id="box5" class="box"></div> 
<div id="box6" class="box"></div> 
</div> 
</div> 

JS: 
$(".box").click(function(){ 
$(this).css({'position' : 'absolute'}).animate({ 
       width: '100%', 
       height : '100%'},300); 
          }); 

Вот как это работает с CSS: http://jsfiddle.net/85mJN/1/

То, что я пытаюсь достичь является изменение размера DIV от его положения, размера родительского DIV, растущий эффект, я бы назвал , Как видите, после того, как .click div движется в левый верхний угол, а затем он подходит к родительскому, а также рушит все это, перемещая других парней. Я пытался объединиться с .css ('z-index': '999') для анимированного div, но это был промах. Основная цель состоит в том, чтобы расширить div от его первоначальной позиции, выше других div, не перемещая их.

~ дрема

Answer 1

$(".box").click(function(){ 

    var clone = $(this).clone().addClass('active'); 
    var parent = $(this).parent(); 
    var pos = $(this).position(); 

    $(this).append(clone); 

    clone.css({'position' : 'absolute', left: pos.left + 'px', top: pos.top + 'px'}).animate({ 
     width: '100%', 
     height : '100%', 
     top: 0, 
     left: 0 
    },300); 


}); 

http://jsfiddle.net/85mJN/3/

Обратите внимание, что ваш ящик элемент должен иметь статическое положение, поэтому добавляется окно абсолютное положение будет обернут из контейнера.

UPDATE:

Добавлено близко по щелчку в то время как окно является активным.

http://jsfiddle.net/85mJN/4/

ТАКЖЕ я все еще думаю, что лучший способ использовать переход CSS3 с toggleClass. Он требует меньше кода, он значительно отказоустойчив, и он более плавный, когда вы используете сложные divs, поскольку это аппаратное ускорение. Я бы не стал беспокоиться о более старых браузерах, они не будут анимировать, но показывают большую коробку ...

Answer 2

Движение, показанное в вашем примере, является продуктом удаления щелчка на div из потока, а затем других корректировок divs с они плавают.

Простое решение сделать #containerleft{ overflow:hidden; ... }

Однако, если это не удовлетворяет ваши потребности, сделать клон работы, а также:

$('#containerleft').on("click", ".box", function(){ 

    var $this = $(this); 

    console.log($this.css('position'));  
    if($this.css('position') === 'absolute'){ 
     $this.animate({width:'0px',height:'0px'},300); 
     //$this.remove(); 
    } 
    else { 
     $this.clone().appendTo($this.parent()).css({'position' : 'absolute'}).animate({ 
        width: '100%', 
        height : '100%'},300); 
    } 


}); 

http://jsfiddle.net/e4NG5/2/