Jquery 可点击调整大小动画。最大化 div 超过其他答案

【问题标题】：Jquery clickable resize animation. Maximizing div over othersJquery 可点击调整大小动画。最大化 div 超过其他
【发布时间】：2013-03-19 00:32:07
【问题描述】：

我无法想出解决问题的方法。所以我有一个很酷的想法来制作漂亮的用户面板，但不知道怎么做使 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 之上，而不移动它们。

~沙人

【问题讨论】：

标签： javascript jquery css html

【解决方案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 时更流畅，因为它是硬件加速的。我不会担心较旧的浏览器，它们不会动画但会显示大框...

【讨论】：

这就是我一直在寻找的 ;) 一个全新的视角，必须弄清楚并制作一些额外的东西 ;) 就像从最大化中返回一样。谢谢你。
伟大的技能。有什么需要更熟悉的吗？
我认为这些都是你需要自己学习的非常具体的东西。我又更新了...

【解决方案2】：

您的示例中显示的移动是从流中删除单击的 div 的产物，然后其他 div 重新调整，因为它们是浮动的。

一个简单的解决方案是使#containerleft{ overflow:hidden; ... }

但是，如果这不能满足您的需求，那么克隆也可以：

$('#containerleft').on("click", ".box", function(){

    var $this = $(this);

    console.log($this.css('position'));    
    if($this.css('position') === 'absolute'){ 
        $this.animate({width:'0px',height:'0px'},300);
        //$this.remove();
    }
    else {
        $this.clone().appendTo($this.parent()).css({'position' : 'absolute'}).animate({
                    width: '100%', 
                    height : '100%'},300);
    }


});

http://jsfiddle.net/e4NG5/2/

【讨论】：