Question

我已经问了一个类似的问题，这个问题让我得到了这个答案，但是当我试图将它移到可用的标记时，我很热衷于运气。

基本上我有4个div乘以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

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

1 个答案: