jquery动画下一个div超过设置宽度

Question

我已经问了一个类似的问题，让我这个答案，但是当试图将它移动到可用的标记我很幸运有任何运气。

本质上，我有4个div的行由3个divs，当他们被点击时，我需要下面的div来扩展网格中的所有其他div，并在需要时切换。我试过使用动画并切换到无济于事。这里使用表格http://jsfiddle.net/gGc5K/的一个例子。

如果可能的话，我需要使用nexr方法以相同的方式工作（使用切换关闭）。

感谢

<!--div in the grid--><div class="gridBox" id="one"></div> 
    <div class="pop" id="bigOne">Content here and a toggle link</div><!--This div needs to expand over the full grid--> 

<!--div in the grid--><div class="gridBox" id="two"></div> 
    <div class="pop" id="bigTwo">Content here and a toggle link</div><!--This div needs to expand over the full grid--> 

Answer 1

var top = 0, 
    left = 0; 

$("td").click(function() { 
    var ref = $(this); 
    if ($(this).hasClass('currentAnimated')) { 
     $(this).css({ 
      "z-index": 1 
     }).animate({ 
      top: top, 
      left: left, 
      width: "40px", 
      height: "39px" 
     }, "4s", function() { 
      ref.removeClass('currentAnimated'); 
     }) 
    } else { 
     top = $(this).position().top; 
     left = $(this).position().left; 
     $(this).css({ 
      "z-index": 1 
     }).animate({ 
      top: 0, 
      left: 0, 
      width: "120px", 
      height: "120px" 
     }, "4s", function() { 
      ref.addClass('currentAnimated') 
     }); 
    } 
}); 

DEMO