淡出和淡入同一空间
我想淡出 #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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
让
#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()
andfadeOut()
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 aposition:absolute;
CSS property targeted to the<div>
element, and the CSS rule targeting<p>
specifiesposition:relative;
. These are the real magic and to really get it you'll need to read some about CSS positioning.好的,不需要 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!