Javascript 使用jQuery在网页中实现类似windows 8的平铺

好的，我在我的网页中添加了两个div，并在jQuery下面添加了两个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);
    });
});

---

使用

$（“#div1，#div2”）.mouseenter（

和

$（“#div1，#div2”）.mouseleave（

当您使用相同的功能并创建长代码时。或者您可以使用Yes，但这只是开始，我将为两个div添加链接和单独的行为。谢谢