0

我有一个容器，里面装满了铺在瓷砖上的小 div。我的目标是单击一个 div，让它调整大小（动画）以匹配容器，然后在第二次单击时，它会收缩回原来的大小。

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

查询：

$('#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 将在展开之前包含有限的信息，然后在完全展开后包含完整信息。

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

谢谢你的帮助！

4

1 回答 1

0

实际上我认为用你所拥有的东西很难获得一个好的效果。也许你必须使用position: absolute;你的“放大” div，然后你会遇到很多问题。

在我看来，动画它们的最佳方式是使用 jQuery，就像我在这里所做的那样。

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

您还可以加载一些缓动以使其更加特别。

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

于 2013-06-13T18:42:51.260 回答