CODEWITHSUNDEEP
javascriptjquerycss
Charlie74
Charlie74

Reputation: 2903

Fade in using jQuery while holding position

What I have currently

I currently have some text that starts off as display:none, and I use jQuery to fadeIn() the text. The issue I'm having is that because the text is centered, as each word fades in, the position of the words on the line keeps moving (they are centering as the paragraph grows).

I understand why this happens. I'm using display:none. So, what I am trying to do is use invisibility:hidden instead, so that all of the words keep their final position on the page.

My issue moving forward

The problem I am running in to is that when I switch to invisibility:hidden, I can't seem to find a way to fade the content in. I did use the suggestion made in this post HERE, but unfortunately that seems to give me the same effect as I have currently.

I'm hoping someone can help me understand how to fade in from hidden without moving elements around.

My 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);           
});

And here is a CodePen demo of the current functionality: http://codepen.io/anon/pen/xocyw/

And here is a CodePen of what I've tried, using invisibility:hidden, with no success: http://codepen.io/anon/pen/KdlHJ/

Upvotes: 0

Views: 209

Answers (1)

Shomz
Shomz

Reputation: 37701

You need to animate opacity. That way you'll avoid display: none and get the same results.

CSS

element {
    opacity: 0;
}

jQuery

$(element).animate({opacity: 1});

See it here: http://jsfiddle.net/H6jts/

And btw. there is no rule invisibility, but visibility.

Here is the working version of your example: http://jsfiddle.net/3js5e/

Upvotes: 2

Related Questions