扩展和覆盖盒子

Question

我期待找到一个允许我具有以下行为的jQuery代码（在图片中）。所以我有一个如下所示的网格，如果有人点击红色区域（一个DIV），那个div将覆盖（越过顶部）它周围的方框（从右侧或左侧两个盒子，一个在下面或在顶部） ） 如果他再次点击，则div会回到正常位置和大小 我无法弄清楚如何实现这一目标？如果有人可以帮忙，我将不胜感激。

第1阶段： http://img341.imageshack.us/img341/461/stage1.jpg

第二阶段： http://img153.imageshack.us/img153/9601/stage2n.jpg

Answer 1

这比我想承认的时间更长：

http://jsfiddle.net/d4DZd/

诀窍是克隆元素并增长元素而不是原始元素，以便元素保持其位置。

Answer 2

喜欢这个吗？

http://jsfiddle.net/kbPqU/

$(".box-spec").click(function() {
    var cover_width = 3,cover_height = 3;
    $("body").prepend('<div class="box-spec" style="width:' + ((128 + 10) * cover_width) + 'px;height:' + ((128 + 10) * cover_height) + 'px"></div>');
});