Imagine a scenario where a full-screen image remains hidden upon page load. When a user clicks a link, the image smoothly slides up from the bottom of the page. Upon clicking the image, it should smoothly move off the page as if it were being translated down by 2000px or something. The current implementation using slideUp and slideDown functions results in a wiping motion instead of a smooth transition that I desire.
I experimented with animation properties like "bottom: +=2000" but faced the same wiping effect. Could it be impossible to achieve this effect for an image with variable width/height?
Below is a snippet of the basic code:
Html:
<div id="nav_link" class="nav_magazin">
<p>Magazin</p>
</div>
<div id="magazin_overlay"><div id="mehr_overlay">mehr...</div></div>
CSS:
#magazin_overlay {
display: none;
z-index: 50;
position: fixed;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
background: url('images/block_cover.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Jquery:
$('.nav_magazin').click(function() {
$('#magazin_overlay').slideDown('slow');
});
$('#magazin_overlay').click(function(){
$('#mehr_overlay').hide();
$(this).slideUp('slow');
});