NB
我的标题:
<header>
<div style="float:left;margin-left:20px;">
<div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;"> </div>
<div style="clear:both;float:left;"></div>
<div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
</div>
</div>
</header>
我有 2 个 div:
<div id="#content1">
<div id="divWelcome" style="margin-top:50px;">
<div id="headerimg" style="position: relative;">
<div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
We offer Cloud solutions for small businesses to help them manage their workflow requirements
</div>
<hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>
<div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
Our core sectors of expertise are professional services, data management and outsourcing.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
因此,当页面加载时,第一个 div 将显示。我想要的效果是当用户按下按钮时divFirst
轻轻地消失,divSecond
我已经使用了 jQuery 的这一点,但效果看起来不太令人愉快。
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
我还可以尝试/阅读什么?谢谢
注意
这是我的 CSS 的一部分
#content1 {
clear: both;
position: absolute;
}
我还淡出了另一张。只是忘了把它放在问题中。我得到的效果是“笨重”
“令人愉悦”是一个非常主观的术语,但是为了改进它,您可以将两者都放在div
父容器内的元素绝对定位,以便它们重叠。那么你可以fadeToggle()
根据需要介于两者之间。像这样的东西:
$('#container').click(function() {
$(this).find('div').fadeToggle();
})
#container > div {
position: absolute;
}
#divSecond {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="divFirst">some content with images</div>
<div id="divSecond">different content with images</div>
</div>
单击文本可查看实际的淡入淡出过渡效果。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)