I currently have two different div elements on my webpage:
<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 provide innovative Cloud solutions tailored for small businesses to meet 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 expertise lies in professional services, data management, and outsourcing sectors.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
Upon loading the page, the first div is displayed. I would like a smooth transition effect where clicking a button causes divFirst to gradually fade out while divSecond fades in. I attempted to achieve this effect using jQuery but found the result less visually appealing.
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
Any suggestions or resources for achieving a smoother transition effect? Thank you.
Note: This CSS snippet is part of my stylesheet
#content1 {
clear: both;
position: absolute;
}
I also realized that I forgot to mention that I was fading out the other element. The current transition appears 'clunky' to me.