响应式向上/向下滑动 div onclick答案

【问题标题】：Responsive slide up/down div onclick响应式向上/向下滑动 div onclick
【发布时间】：2012-09-17 19:23:05
【问题描述】：

我有一个链接，单击时需要向上或向下滑动（取决于状态）一个包含响应式全宽视频的 DIV。由于它的响应性和宽屏视频，高度无法固定（我现有的代码会这样做并且需要更改）。此 DIV（包含视频）必须在页面加载时隐藏。

我在这里有我现有的代码：http://jsfiddle.net/D5EMp/，它在一定程度上可以隐藏/显示视频。但是，主要问题是视频的高度在页面加载时可见并创建了一个空白区域。

我需要视频向下/向上滑动并从水平黑条淡入/淡出，而该区域下方的内容会在显示卷的状态发生变化时被向下推或向上拉。

一个好处是添加功能，当点击链接时，页面滚动到打开的 DIV。

【问题讨论】：

【解决方案1】：

您在 css 中添加的填充导致了间隙：

padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/

您可以在显示此填充时对其进行动画处理，example here，但这似乎会导致视频在 Firefox 上变得混乱。

在尝试动画到该高度之前，我会计算正确的高度，并且根本不使用填充。要获得 16/9 视频的正确高度，只需将宽度除以 16，然后将其乘以 9。工作示例：

要将页面自动滚动到视频顶部，您可以将其作为动画的完整功能：

function(){$('html, body').scrollTop($('#showreel').offset().top);}

【讨论】：

感谢您的回答，我明白您的意思了。有没有办法不对填充计算进行动画处理？因此，例如，我单击按钮，计算填充宽度所需的视频大小，然后包装器 DIV 向下滑动（以适应计算的大小），然后视频淡入顶部？当您隐藏视频时反之亦然？这个可以吗？
是的，太好了，这种方法也可以响应吗？例如，当您调整浏览器大小时，视频不会随窗口一起展开（在旁边留下黑条），这是否可以设为响应式？
是的，您可以设置窗口调整大小功能，例如jsfiddle.net/D5EMp/8
太好了 - 感谢您的所有帮助！

【解决方案2】：

空格来自您在#showreel 上设置的填充，只需将其删除即可。

最大的问题是如何知道视频的大小。但在我看来，在加载之前不可能知道视频的大小。而且访问iframe会导致一些跨域问题。

em，你可以寻找另一种方法来解决这个问题，而不仅仅是技术

这是我的想法

【讨论】：