jquery - 如何将 : Resize a single div, 放入容器中，其中有一个类似 div 的图 block

Question

我有一个容器，里面装满了小 div，它们以瓷砖的形式排列。我的目标是点击一个 div，让它调整大小(动画)以匹配容器，然后在第二次点击时，它会收缩回原来的大小。

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;
}

它有点像在 chrome 中工作，但它不干净，不流畅，有很多晃动和怪异。

我希望“未点击”的图 block 淡入后面，然后在原始图 block 关闭时淡入。

我目前混合使用 CSS3 转换和 jquery 来触发和切换。

谢谢!

里奇

++更新++

目标是单击一个图 block ，使其扩展以适合容器，然后再次单击使其返回到其原始位置。

这只是一个用于测试交互的原型(prototype)，所以我可以对位置进行硬编码，但当它投入生产时(不是我编写的)，它将是动态的。

我希望过渡流畅，让用户了解正在发生的事情。

每个 div 在扩展之前将包含有限的信息，然后在完全扩展后包含完整信息。

我一直在做很多设计工作，我的开发工作很痛苦:)

感谢您的帮助!

Answer 1

其实我觉得用你现有的东西很难获得好的效果。也许你必须使用 position: absolute; 作为你“放大”的 div，然后你会遇到很多问题。

在我看来，为它们制作动画的最佳方式是使用 jQuery，就像我所做的那样here .

实际上，您为保持基本宽度/高度的当前元素设置了 .data()，然后是一小步播放您想要的动画。

您还可以加载一些 easings让它更特别。

我添加了 if( t.is(':animated') ) return; 以避免在动画运行时用户尝试点击时出现问题