jquery - クリックすると画面に合わせてdivを埋め、他のdivをオーバーレイする方法

Question

<div>同じクラス名のタグのセットがあります。私の目的は、特定のをクリックしたときに、<div>その高さと幅を最大化して画面全体に表示し、残りの部分をオーバーレイする必要があること<div>です。私はこれを達成するために以下のコードを使用しています

$('div').click(function(){
    var isFullscreen = false;
    var d = {};
    var speed = 900; 
    if(!isFullscreen){ // MAXIMIZATION
        d.width = $(window).width();;
        d.height = $(window).height();; 
        isFullscreen = true;
    }
    else{ // MINIMIZATION            
        d.width = "300px";
        d.height = "100px";            
        isFullscreen = false;
    }
    i = 0 
    id = $(this).attr("id");
    while(i<=12){
        if(i != id){
            $("i").hide();
        }
        i++;
    }
    $(this).animate(d,speed)
    })

だから私がしたことは、 1から12の順序でそれぞれにIDを与え、クリックされたものを除いてそれらを非表示にしようとしたことです。これはこれを行う正しい方法ですか。私の悪い英語をお詫びします。追加情報：流動的なレイアウトでJqueryMasonryを使用しています。

Answer 1

あなたはこのようなものを探していますか：

http://jsfiddle.net/Ns5hD/