In my current project, I am working on a div element that has a background color and CSS transitions applied to it.
#foo {
background-color:rgba(255,0,0,0.9);
-webkit-transition: all 3000ms ease;
-moz-transition: all 3000ms ease;
-o-transition: all 3000ms ease;
transition: all 3000ms ease;
}
Additionally, I have included a button in the design. The requirement is that upon clicking the button, the following should happen:
- The
divshould immediately switch to a transparent background with a final height. - A fade-in effect should be created only for the
background-colorproperty.
To achieve this functionality, I have defined some classes for the div:
#foo.transparent {
background-color:transparent;
}
#foo.final {
background-color:rgba(255,0,0,0.9);
height:400px;
}
These classes are then applied to the div using jQuery when the button is clicked:
$('#start').click(function() {
$('#foo').addClass('transparent').addClass('final');
});
However, there seems to be an issue where the height switches immediately to its final value, which is expected behavior. But the background color does not undergo the necessary transition from transparent to the final specified value. What could I be overlooking? (view fiddle)