试图找到一个用于调整方块大小的脚本 - 有什么建议吗？

Question

我需要一个脚本，最好是jquery，来执行以下操作：

我有四个小方块（即div标签），每个小方块都有不同的颜色，嵌套在一起形成一个大方块。

当我将鼠标悬停在一个小方块上时，它会放大并覆盖整个巢。当我移开鼠标时，放大的正方形将恢复到其在巢中的原始大小。

我希望你明白这一点。

是否有脚本可以执行此操作？

在 Sprint 网站上可以找到类似的动画和调整大小的想法： 链接文本

但我希望放大的正方形的动画覆盖巢中的其他三个正方形。

非常感谢大家。

埃里克

Answer 1

这应该做你想要的：

HTML

<div class="nest">
    <div class="square red"></div>  
    <div class="square blue"></div> 
    <div class="square green"></div> 
    <div class="square yellow"></div> 
</div>    

CSS

/* Creates the coordinate system for absolutely positioned squares */
.nest {
    position: relative;
    width: 200px;
    height: 200px;
}

.square {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
}

.red {
    top: 0;
    left: 0;
    background-color: red;
}

.blue {
    top: 0;
    left: 100px;
    background-color: blue;
}

.green {
    top: 100px;
    left: 0;
    background-color: green;
}

.yellow {
    top: 100px;
    left: 100px;
    background-color: yellow;
}

jQuery

$('.square').each(function(){

    var origTop = $(this).offset().top;
    var origLeft = $(this).offset().left;

    $(this).hover(
        /* mouseover */
        function(){
            $(this).css({zIndex: 2});
            $(this).stop();
            $(this).animate({
                top: 0,
                left: 0,
                width: 200,
                height: 200
            });
        },
        /* mouseout */
        function(){
            $(this).stop();
            $(this).animate({
                top: origTop,
                left: origLeft,
                width: 100,
                height: 100
            }, function(){
                $(this).css({zIndex: 1});  
            });
        }
    );
});