javascript - 向各个方向展开框

Question

我有以下结构:

我的目标是当用户将鼠标悬停在框上时，它们应该在不破坏 UI 的情况下展开并越过其他框。所以基本上盒子应该在每个指令中扩展 20px，而所有其他元素都保持在同一个位置。请注意，我不知道盒子的确切尺寸，因为它们是负责任的。

我是这样放置盒子的:

#holder {
    width: 250px;
    background-color: #FFCCCC;
    overflow: hidden;
    padding: 15px;
}

.box {
    width: 45%;
    height: 50px;
    border: 1px grey solid;
    float: left;
    margin-bottom: 15px;
}

.box:nth-child(odd) {
    float: right;
}

使用下面的 HTML:

<div id="holder">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

我正在使用 jQuery 处理事件。

$(document).ready(function(){
$(".box").mouseenter(function(){
      var _this = $(this);
      var newWidth = parseInt(_this.css("width")) + 40,
          newHeight = parseInt(_this.css("height")) + 40;

    _this.
        css("z-index", 99).
        animate({
            width: newWidth + "px",
            height: newHeight + "px",
            marginTop: "-20px",
            marginLeft: "-20px"
        }, 1000);
});

 $(".box").mouseleave(function(){
      var _this = $(this);
      var newWidth = parseInt(_this.css("width")) - 40,
          newHeight = parseInt(_this.css("height")) - 40;

    _this.
    css("z-index", 1).
    animate({
        width: newWidth + "px",
        height: newHeight + "px",
        marginTop: "0px",
        marginLeft: "0px"
    }, 1000);
});
});

这是 fiddle :http://jsfiddle.net/3T89h/

Answer 1

我能想到的最简单的方法是绝对定位(尽管可能有更简洁的方法)。

你需要申请

position:absolute;

给每个框，给它一个固定的高度/宽度(百分比不会真正起作用)并手动定位，例如

http://jsfiddle.net/3T89h/1/

编辑:

如果您的盒子需要响应，具有未确定的高度和宽度，那么仍然可以使用类似的方法来实现。

你可以用你原来的盒子作为容器，用

position:relative;

然后在其中保留您的实际内容，这些内容将被绝对定位，这是一个示例:

http://jsfiddle.net/3T89h/2/

因此，基本上您现在拥有充当响应式包装器的框，其中包含具有所需效果的内部框，与包装器的尺寸相匹配。然后可以显着更改设计，但不会更改您想要的 javascript 效果，例如:http://jsfiddle.net/3T89h/3/