如何：调整单个div的大小以适合容器，其中有一个类似div的图块

Question

I have a container, full of little divs laid out in tiles. My goal is to click a div, have it resize(animate) to match the container, then on a second click, it will contract back to its original size.

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

Jquery:

$('#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;
}

It's sort of working in chrome, but it's not clean, it's not fluid, a lot of shaking, and weirdness.

I would prefer the 'non-clicked' tiles to fade into the back, then fade back in when the original tile is closed.

I'm currently using a mix of CSS3 transitions and jquery for triggers, and toggles.

Thanks!

Richie

++ UPDATE ++

Objective is to click a tile, have it expand to fit the container, then click again to have it return to its original position.

This is just a prototype for testing an interaction, so I may be able to hard code the positions, but when it goes to production (not programmed by me) then it will be dynamic.

I want the transitions to be fluid to give the user a sense of what's happening.

Each div will contain limited information prior to expansion, then the full info once it has completely expanded.

I've been doing so much design work, my dev work is suffering :)

Thanks for any help!

Answer 1

Actually i think is bit hard to obtain a nice effect with what you have. Maybe you must use position: absolute; for your "enlarged" div and then you will get a lot of problems.

In my opinion the best way to animate them is to use jQuery, like i did here .

Actually you set .data() for current elements where you keep base width/height and then is a small step to play however you want with your animation.

You also can load some easings to make it more special.

I added if( t.is(':animated') ) return; to avoid problems if users try to click while the animation is running