I've implemented a fading effect on elements in my page using the following script:
$(document).ready(function() {
$('#holder').delay(650).fadeIn(1000);
$('#sidepanelHolder').delay(650).fadeIn(1000);
$('#bottomHolder').delay(1200).fadeIn(1000);
});
To prevent the area from being invisible and then visible, causing content to move around, I'm using this CSS code for creating a placeholder:
.nope {
display: none;
width: auto;
height: auto;
}
Here's the HTML structure of the element:
<article class="featureBottom">
<div id="bottomHolder" class="nope">
<img src="/images/features/one.jpg" width="100%" alt="" />
</div>
</article>
For jQuery purposes, I have kept the id undefined. The fade animations work well for #holder and #sidePanelHolder, but not for #bottomHolder.
.featureBottom {
max-width: 1400px;
margin: 20px auto 20px auto;
padding: 0;
display: block;
}
Is there a simpler way to create placeholders that match the dimensions of the fading elements, ensuring a smooth transition without affecting other content layout?
Hopefully that explanation is clear :-)
Thank you!
EDIT:
This is how the page looks before the image fades in:
https://i.sstatic.net/850eS.png
The placeholder doesn't appear here. The alignment of the S's and footer (change in background texture) is close together.
Once the image loads:
https://i.sstatic.net/r35VT.png
The footer gets pushed down, indicating that the auto height & width properties of .nope are not applied as intended, unlike with the other two faders (holder and sidepanelHolder) on the same page.