jQuery Fade In / Fade Out Text, then Fade In new text

Question

This is my first time using jQuery, I am taking an online class for it but have never used it on a website.

My goal is on the homepage to have "Hello there" show up first for 2 seconds, then fade out and have "Your partner in digital" fade in and stay permanently.

I've been playing around with a few ideas of related connundrums here and am getting close. But my structure seems wrong because: 1) Both things show up at first, then "hello there" starts to fade and then "your partner is bumped up" - I want "hello there" to show up quick and then fade away 2) I want "your partner in digital" to never fade away once it appears

    jQuery(document).ready(function(){
        $(".hellothere").fadeOut(4500,function(){
            $(".partner").fadeIn(10000, function(){
                $(".partner").fadeOut(4500);
            });
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="hellothere"><span class="font-168856 font-444086" style="font-size: 65px; text-transform: uppercase;">Hello there.</span></h1>
    <h1 class="partner"><span class="font-168856 font-444086" style="font-size: 65px; text-transform: uppercase;">Your partner in digital.</span></h1>

When I deleted this:

function(){
                $(".partner").fadeOut(4500);

It broke the whole thing (was trying to get it to stop fading out).

Any tips here? Thanks so much.

A similar question has been asked before, please see this thread: https://stackoverflow.com/questions/683363/jquery-autohide-element-after-5-seconds — Edward Nevard, Nov 28 '17 at 20:54
Please don't separate your HTML, CSS and JavaScript into separate code snippets that run independent of each other. They all go together to create one snippet that can be executed. Also, don't use code snippets just to show some code that isn't meant to be run. Just indent that code by 4 spaces. — Scott Marcus, Nov 28 '17 at 20:56
You mean something like this? https://jsfiddle.net/u4qL6yud/ — justDan, Nov 28 '17 at 20:57
Thanks @ScottMarcus ! I think SO was being weird for me yesterday and wouldn't let me tag people and the 4 indents wasn't working for code. but now it's working fine again! thanks for the tip — Emigriff, Nov 29 '17 at 16:30

Scott Marcus · Accepted Answer · 2017-11-28T21:05:17.310

The second piece of text must be hidden by default. That can be done with a CSS class.

Then, once you fade in the .partner text, don't fade it out. So, the innermost effect should be removed. You were on the right track with that, but it looks like you forgot to remove the } that goes with the fadeOut function, which caused a syntax error.

Also, there is no need for embedded span elements inside your h1 elements in this case since the entire text is in the span and the span is the only thing in the h1.

Lastly (FYI) don't use inline styles when classes allow for much simpler duplication of styles and create less clutter in the HTML.

jQuery(document).ready(function(){
  $(".hellothere").fadeOut(2000,function(){
    $(".partner").fadeIn(10000);
  });
});

.partner {
  display:none;
}

.fontStuff {
  font-size: 65px; 
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="hellothere font-168856 font-444086 fontStuff">Hello there.</h1>
<h1 class="partner font-168856 font-444086 fontStuff">Your partner in digital.</h1>

Awesome - thanks for clearing things up with the HTML/CSS too :D This worked exactly how I wanted it. Thank you so much! — Emigriff, Nov 29 '17 at 17:05

score 0 · Answer 2 · answered Nov 28 '17 at 21:07

I simplified your code slightly so that there is only 1 header tag and the inner html is replaced after it fades out, then fades back in.

jQuery(document).ready(function() {
  $(".welcomeHeader").fadeOut(4500, function() {
    $(".welcomeHeader span").text("Your partner in digital.");
    $(".welcomeHeader").fadeIn(4500);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="welcomeHeader">
  <span class="font-168856 font-444086" style="font-size: 65px; text-transform: uppercase;">Hello there.</span>
</h1>

jQuery Fade In / Fade Out Text, then Fade In new text

2 Answers2