jquery - 方法: 単一の div のサイズを変更して、同様の div のタイルがあるコンテナーに合わせます。

Question

タイルに配置された小さな div でいっぱいのコンテナがあります。私の目標は、div をクリックし、コンテナーに合わせてサイズ変更 (アニメーション化) し、2 回目のクリックで元のサイズに縮小することです。

http://jsfiddle.net/taylorRichie/jXd5L/2/

Jクエリ:

$('#bio').click(function(){
    $('.tile').toggleClass("hidden");
    $('#bio').toggleClass("enlarged");
});

CSS:

#container{
    border:1px solid red;
    min-height:200px;
    width:400px;
    overflow:hidden;
    position:relative;
}

.tile{
    width: 90px;
    height: 90px;
    background-color: red;
    float:left;
    margin:5px;
    z-index:5;
    -webkit-transition:all 1300ms ease-in-out;
    -moz-transition:all 1300ms ease-in-out;
    -o-transition:all 1300ms ease-in-out;
    transition:all 1300ms ease-in-out;
}

.hidden{
    width: 0px;
    height: 0px;
    opacity: 0;
    position:relative;
    -webkit-transition:all 2300ms ease-in-out;
    -moz-transition:all 2300ms ease-in-out;
    -o-transition:all 2300ms ease-in-out;
    transition:all 2300ms ease-in-out;
}

#bio{
    background-color:#CCC;
} 

.enlarged{
    min-height:90px;
    height:100%;
    width:100%;
    opacity:1;
    position:absolute;
    z-index:20;
    -webkit-transition:all 1300ms ease-in-out;
    -moz-transition:all 1300ms ease-in-out;
    -o-transition:all 1300ms ease-in-out;
    transition:all 1300ms ease-in-out;
}

それは一種のクロムで動作していますが、きれいではなく、流動的ではなく、揺れが多く、奇妙です.

「クリックされていない」タイルが後ろにフェードインし、元のタイルが閉じられたときにフェードインすることをお勧めします。

現在、トリガーとトグルに CSS3 トランジションと jquery を組み合わせて使用​​しています。

ありがとう！

リッチー

++ 更新 ++

目的は、タイルをクリックしてコンテナーに合わせて拡張し、もう一度クリックして元の位置に戻すことです。

これはインタラクションをテストするためのプロトタイプにすぎないため、位置をハードコーディングできるかもしれませんが、本番環境に移行すると (私がプログラムしていません)、動的になります。

ユーザーに何が起こっているかを感じさせるために、トランジションを流動的にしたいと考えています。

各 div には展開前の限られた情報が含まれ、完全に展開されると完全な情報が含まれます。

私は非常に多くの設計作業を行ってきましたが、私の開発作業は苦しんでいます:)

助けてくれてありがとう！