Exploring Display Options
In my current setup, I have text that initially has a display:none property, and jQuery is applied to fadeIn() the content. The challenge lies in the fact that since the text is centered, as each word appears, the positioning on the line shifts (due to centering of the growing paragraph).
Understanding the root cause of this issue being the use of display:none, my attempt is to switch to using visibility:hidden. This alteration aims to retain the final position of all words on the page.
Trouble Ahead
The difficulty arises when attempting to fade in content while utilizing visibility:hidden. Despite implementing suggestions from a relevant post found HERE, unfortunately, similar effects to the current situation persist.
An inquiry persists for assistance in comprehending how to achieve a seamless transition from hidden visibility without causing element displacements.
Snippet of Code
HTML
<div class="center">
<h1 id="cfs">Charles Samet</h1>
<p class="intro">
<span id="fade1">Husband.</span>
<span id="fade2"> Father.</span>
<span id="fade3"> Computer Geek.</span>
<span id="fade4"> Welcome to my world...</span>
</p>
</div>
CSS
.center {text-align:center}
#fade1, #fade2, #fade3, #fade4 {display:none; font-size:125%;}
#cfs {display:none}
jQuery
$(document).ready(function() {
$('#cfs').fadeIn(2500);
$('#fade1').delay(3000).fadeIn(2000);
$('#fade2').delay(5000).fadeIn(2000);
$('#fade3').delay(7000).fadeIn(2000);
$('#fade4').delay(9000).fadeIn(2000);
});
A demonstration of the existing functionality can be viewed through this link: http://codepen.io/anon/pen/xocyw/
Additionally, an alternative implementation using visibility:hidden can be observed here: http://codepen.io/anon/pen/KdlHJ/