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之上，而不移动它们。

~sandman

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/

请注意，您的box元素应该具有静态位置，因此附加的框绝对位置将从容器中包装。

更新：

在框处于活动状态时添加了关闭点击。

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

我仍然认为使用toggleClass进行CSS3过渡的最佳方法。它需要更少的代码，它非常安全，并且当你使用复杂的div时它会更加平滑，因为它的硬件加速了。我不担心旧的浏览器，它们不会动画，但显示大盒子......

Answer 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/

Jquery可点击调整大小动画。最大化div而不是其他人

2 个答案: