0

I have an issue. I have two text. On page load when first text fades out i want the second text to fade in same line and the second text should stay. Here is my fiddle http://jsfiddle.net/st6rxwjr/1/

Here is my code : 

<div class="text1 animated  zoomIn">Welcome to our site</div>
<div class="animated text2 bounceIn">Company Name</div>

CSS: 

body { padding-top:30px;}
.text2 {
    display: none;
}
div {
    font-size:30px;
    font-weight:bold;
    text-transform:uppercase;
    text-align:center;
}

JS : 

function fade() {
    $('.text1').fadeIn().delay(2000).fadeOut();
    $('.text2').delay(2000).fadeIn();
}
    fade();
Shahil M
  • 3,836
  • 4
  • 25
  • 44
  • Why not make with pure CSS? I've provided a simple jQuery solution as well http://stackoverflow.com/q/16344354/1542290 – Mr. Alien Mar 31 '15 at 06:45
  • The problem is IE 8 support :) Jquery will work in IE 8 and CSS 3 will work in IE 9. I had to create a intro text for a client so i found this solution. – Shahil M Mar 31 '15 at 06:56

2 Answers2

1

Try using call back function like this:

function fade() {
    $('.text1').fadeIn().delay(2000).fadeOut(1000,function(){
        $('.text2').delay(2000).fadeIn();
    });
}

You can put 0 instead of 1000 if you don't want any slow fade In effect.

Developer107
  • 1,728
  • 2
  • 14
  • 24
0

I think you need like: Fiddle.

Change in your Jquery code text2 delay. You given 2000 So text2 will appear before text1 will disappear.

function fade() {
        $('.text1').fadeIn().delay(2000).fadeOut();
        $('.text2').delay(2500).fadeIn();

}
    fade();
ketan
  • 19,129
  • 42
  • 60
  • 98