javascript - Jquery 可点击调整大小动画。最大化 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/

请注意，您的框元素应具有静态位置，以便附加的框绝对位置将从容器中换行。

更新:

添加了当框处于事件状态时点击关闭。

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

此外，我仍然认为将 CSS3 过渡与 toggleClass 结合使用是最好的方法。它需要更少的代码，故障安全性更高，并且当您使用复杂的 div 时它更流畅，因为它是硬件加速的。我不会担心较旧的浏览器，它们不会显示动画但会显示大框...