1

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

~ 沙人

4

2 回答 2

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

于 2013-03-19T00:43:56.773 回答
0

您的示例中显示的移动是从流中删除单击的 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/

于 2013-03-19T00:55:49.590 回答