javascript - jQuery を使用して Web ページに Windows 8 のようなタイルを実装する

Question

さて、Web ページに 2 つの div を追加し、jQuery の下に追加しました。マウスをタイルの上に移動すると、すべてがうまく見えますが、最初の div が展開すると、2 番目の div の位置が変わります。2 番目の div をフリーズしたいのですが、展開されたタイルは 2 番目の 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);
    });
});