淡出和淡入同一空间

发布于 2024-08-30 18:16:03 字数 90 浏览 5 评论 0原文

我想淡出 #lg-image 并淡入 #column-left 和 #column-right 到与 #lg-image 相同的空间。这可能吗?

谢谢

I want to fade out #lg-image and fade in #column-left and #column-right into the same space as #lg-image was. Is this possible?

Thank you

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

好久不见√ 2024-09-06 18:16:03

#lg-image#column-left#column-right 看起来很像 CSS ID 选择器 我假设您正在谈论 HTML/CSS 和 JavaScript 的一面。

另外,考虑到您使用 CSS 选择器语法引用 HTML 元素,您就可以使用 jQuery 来完成工作。 jQuery 提供 fadein()fadeOut() 函数。

我的 fadein() 页面上有一个 示例链接到哪些演示在同一位置淡出某些内容并淡出其他内容。此时您需要的并不是 JavaScript,而是允许两个元素在屏幕上占据相同空间的 CSS。请注意,示例中的 CSS 包含针对

元素的 position:absolute; CSS 属性,以及针对

的 CSS 规则; 指定位置:相对;。这些才是真正的魔力,要真正理解它,您需要阅读一些有关 CSS 定位。

Give that #lg-image and #column-left and #column-right look a lot like CSS ID selectors I assume you're talking about HTML/CSS with a side of JavaScript.

Also given that you're referring to your HTML elements with CSS selector syntax, you're on your way to being able to use jQuery to get the job done. jQuery offers fadein() and fadeOut() functions.

There's an example on the fadein() page I linked to which demos fading something out and fading something else in the same place. What you're looking for is not so much JavaScript at that point though as the CSS which allows the two elements to occupy the same space onscreen. Take note that the CSS in the example contains a position:absolute; CSS property targeted to the <div> element, and the CSS rule targeting <p> specifies position:relative;. These are the real magic and to really get it you'll need to read some about CSS positioning.

澉约 2024-09-06 18:16:03

好的,不需要 jquery!

看一下例子:

DEMO: http://jsbin.com/aguhu/4

源代码: http://jsbin.com/aguhu/4/编辑

让我知道!

ok, no jquery needed for this!

look the example:

DEMO: http://jsbin.com/aguhu/4

SOURCE CODE: http://jsbin.com/aguhu/4/edit

let me know!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文