A scenario is presented where HTML contains two div elements, one with text and the other hidden initially. The goal is to make the second div slide up from below the first div to create a new background color effect.
While sliding up works successfully, the issue arises when the second div covers the original text. How can this be prevented?
To view the code in action, visit the following JSFiddle link: http://jsfiddle.net/SmAHU/206/
Code: HTML:
<div id="container">
<div id="blue">Hey</div>
<div id="green"></div> </div> <input type="button" value="up" id="button" />
CSS
#container {position:relative; overflow:hidden; height:50px; width:50px; }
#blue {height:50px; width:50px; background:#009; position:relative; top:0; left:0; color:white;}
#green {height:50px; width:50px; background:#090; position:absolute; top:50px; left:0;}
Jquery
$('#button').toggle(function() {
$('#green').animate({
top: 0
}, 1000, function() {
$('#button').val('down');
});
}, function() {
$('#green').animate({
top: '50'
}, 1000, function() {
$('#button').val('up');
});
});