CODEWITHSUNDEEP
javascriptjqueryhtmlcssfadein
rfehre
rfehre

Reputation: 31

Fade in text with jQuery appearing choppy, displacing each other

Example here:

https://codepen.io/rfehre/pen/LrZVre

So I'm trying to fade in 'we' 'put' 'in' and 'work' sequentially. As it stands right now 'we' 'put' and 'in' come in very choppy and displace one another rather than fading into their final spots right off the bat.

I'm using .delay and fading in from a 'display:none' as it stands right now.

$(document).ready(function () {
  $('.hidden1').delay(400).fadeIn(1000);
    $('.hidden2').delay(800).fadeIn(1000);

   $('.hidden3').delay(1200).fadeIn(1000);

   $('.hidden4').delay(1600).fadeIn(1000);
});

What am I doing wrong?

Thanks in advance!

Upvotes: 1

Views: 46

Answers (1)

Minderov
Minderov

Reputation: 521

Instead of display: none use opacity: 0, and instead of .fadeIn(1000) use .animate({opacity: 1}, 1000).

Here is a working codepen: https://codepen.io/anon/pen/pKEyBJ

Upvotes: 2

Related Questions