Jquery在设置宽度上为下一个div设置动画

Question

我问了一个类似的问题，得到了这个答案，但是当我试图将其移至可用标记时，我很幸运。

基本上我有 4 个 div x 3 个 div 的行，当它们被单击时，我需要以下 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