javascript - ios风格文件夹动画

Question

我目前正在制作一个视频缩略图库，其中包含两行 5 张图片，总共 10 张图片。功能是用户单击视频拇指，然后会发生类似动画的 ios 文件夹，并且在打开的区域内是带有一些信息的视频。我目前有一半在工作，但我很难弄清楚底行的功能。我想当用户点击第二行视频拇指时，该区域会在视频上方打开。这是到目前为止我所拥有的链接 [http://jsfiddle.net/jsavage/Vnya7/14/] 希望它对我正在尝试做的事情更有意义。任何帮助将不胜感激！

Answer 1

这是一个粗略的想法，如何实现这样的效果。我在这里更新了你的小提琴：http: //jsfiddle.net/Vnya7/29/

为了理解，我创建了具有多个可见性参数的函数。

function expandToDirection(self, row, content, dir) {..}

基本上，通过正确的班级分配，您将知道哪一行正在调用，如下所示<div class="row bottom">。请注意，底部是方向的另一个参数。

有了这个方向，我可以轻松地在之前/之后注入所需的元素：

if (dir == direction.top) {
    row.before(content);  // will inject content before the said row
    content.find(".folderName").text($(self).text());

} else if (dir == direction.bottom) {
    row.after(content);   // will inject content after the said row
    content.find(".folderName").text($(self).text());

}

注入完成后，您可以简单地添加到.folderContent任何样式类以偏移位置，使其看起来对齐。除此之外，这是一个反复试验的问题。

jQuery 文档

.before( content [, content ] )
描述：在匹配元素集合中的每个元素之前插入由参数指定的内容。
见：http ://api.jquery.com/after/

.after( content [, content ] )
描述：在匹配元素集合中的每个元素之后插入由参数指定的内容。
见：http ://api.jquery.com/before/