How to fade/blend between 2 divs in a less 'clunky' way


My 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;">&nbsp;</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>

I have 2 divs:

<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

            <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 id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">

So when the page loads the 1st div shows. The effect I want is when the user presses a button the divFirst gently fades away and the divSecond gently fades in. I have used this bit of jQuery but the affect does not look very pleasing.

<script type="text/javascript">
    $(document).ready(function () {
        $("#divAbout").click(function () {

What else can I try/read up on? Thanks

NB This is part of my CSS

#content1 {
    clear: both;
    position: absolute;

Also I was fading the other one out. just forgot to put it in the question. The affect I get is 'clunky'



'Pleasing' is a very subjective term, however to improve it you could place both div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:

$('#container').click(function() {
#container > div {
  position: absolute;
#divSecond {
  display: none;
<script src=""></script>
<div id="container">
  <div id="divFirst">some content with images</div>
  <div id="divSecond">different content with images</div>

Click the text to see the fade transition in action.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.