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=".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>

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./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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 28, 2017 at 20:55 Scott Marcus 65.9k66 gold badges5454 silver badges8080 bronze badges asked Nov 28, 2017 at 20:50 EmigriffEmigriff 20722 gold badges88 silver badges2020 bronze badges 4

• A similar question has been asked before, please see this thread: stackoverflow./questions/683363/… – Edward Nevard Commented Nov 28, 2017 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 Commented Nov 28, 2017 at 20:56
• You mean something like this? jsfiddle/u4qL6yud – justDan Commented Nov 28, 2017 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 Commented Nov 29, 2017 at 16:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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./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>

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() {
  $(".weleHeader").fadeOut(4500, function() {
    $(".weleHeader span").text("Your partner in digital.");
    $(".weleHeader").fadeIn(4500);
  });
});

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