javascript - 使用 jQuery 在网页中实现类似 Windows 8 的磁贴

Question

好吧，我在我的网页中添加了两个 div 并添加到 jQuery 下方，一切看起来都很好，当我将鼠标移到它展开的图块上时，但是当第一个 div 展开时，第二个 div 位置发生变化。我想冻结第二个 div，扩展的磁贴应该在第二个 div 的顶部。请建议。

$(document).ready(function () {
    $("#div1").css("background", "Red");
    $("#div2").css("background", "Blue");
    $("#div1").mouseenter(function () {
        $(this).animate({
            height: "+=30px",
            width: "+=30px"
        }, 50);
    });
    $("#div1").mouseleave(function () {
        $(this).animate({
            height: "-=30px",
            width: "-=30px"
        }, 50);
    });
    $("#div2").mouseenter(function () {
        $(this).animate({
            height: "+=30px",
            width: "+=30px"
        }, 50);
    });
    $("#div2").mouseleave(function () {
        $(this).animate({
            height: "-=30px",
            width: "-=30px"
        }, 50);
    });
});