jquery - CSS/JS 100% 高度嵌入与 jQuery 滑动标题

Question

过去两个小时我一直在搜索，但一直找不到针对这种情况的解决方案。

我有一个网站，我允许用户从第 3 方(例如 justin.tv)“弹出”嵌入式视频流。当他们这样做时，我在窗口中放置了一个小的全宽标题，除了顶部的 10px 外，该标题大部分是隐藏的。

当他们将鼠标悬停在 10px 区域时，标题会扩展到内容中，为他们提供一些菜单选项，例如“弹回”。

问题是，无论我做什么(纯 css、css/js 等)，我都无法得到它，所以在任何情况下，都是:

• 弹出窗口已创建，标题显示为 40 像素，一段时间后，它会折叠回 10 像素
• 用户将鼠标悬停在标题上，它展开 40px
• 用户鼠标离开标题，它收缩回 10px

嵌入的视频将占据窗口中的所有剩余空间，我们永远不会在窗口中看到滚动条。

我已经“大部分”使用 javascript 来调整 div 的大小，但它不能很好地与 jquery.animate() 函数结合使用，后者负责更改标题的高度。

感谢任何帮助!

编辑:

可以在以下位置找到半工作示例:

http://wellplayed.org/channel/now_live

根据您阅读本文时直播的 channel ，单击其中一个，然后在“查看流”页面中，找到左上角的“弹出流”按钮。

不过请注意，我已经更正了一些在我的开发环境中完成此操作的方法，因此它相当不像那里那么糟糕。

Answer 1

感谢您发布您尝试做的事情的视觉效果

我认为在这种情况下，如果您使用绝对定位会容易得多，这样只有一个变量(顶部坐标)需要操作，而且您不必执行调整大小功能，即 AP (绝对定位)也会解决这个问题。

实质是你需要 div、bar 和视频容器，同时进行动画处理，当它们进行动画处理时，你还需要你的嵌入对象以相同的速度调整大小。我发现有办法太多的计算，即使那样我也无法以任何速度让对象随父对象一起调整大小..所以我认为让 CSS 尽可能地做 mych 更容易然后只使用 jQuery 移动位置

最主要的是确保顶部栏 #stream-bar-hover 始终保持相同的高度..所以不要在上面放置填充等..，你已经有了 #stream-bar 在里面，所以任何装饰都可以放在那里

我的基础是左上角的图像根据您的 HTML 为 38x38，但如果您希望它更小，您可以不同地计算下一位，当我在中添加 1px 边框和 2px 填充和 2px 边距时#stream-bar 这意味着“悬停栏的高度必须为 48px(我确实添加了溢出:隐藏以防万一；))

然后绝对定位 #stream-bar-hover 和 #stream-popup 使它们两个填充屏幕的各个部分所以 top: 0 ; 对于栏和 top: 48px; 对于视频容器，这两个 div 的左右和底部坐标永远不需要改变，只需要改变延迟函数的顶部和悬停功能应该都有效，您只需要同时为两个 div 顶部坐标设置动画

此方法的优点是它不需要 window.resize() 函数，我认为您的方法会这样

这是一个工作示例:link使用代码的 fiddle :here