Cacher is the code snippet organizer for pro developers

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

<!-- Let me see if I can explain what is going on for you: -->

<!-- 1. jQuery and JavaScript execute statements one right after the other without waiting for the first to complete. -->

<!-- 2. Therefore, $.fadeIn is called, then the .replaceWith(), and then fadeIn() all in one scan without waiting for any of them to finish. -->

<!-- 3. You need a promise or deferment to sequence the tasks. -->

<!-- 4. .fadeOut and .fadeIn both accept a closure as their 2nd optional argument, which is executed when the function as finished (after the specified fading time). You want to put your code within the closure as such: -->

function replaceText() {

        //* $.faceOut([duration], [complete]);
        //* Once it is done fading out, then do the replace
        $( 'span.span.to-to-replaced' ).fadeOut(1000, function(){
            
            //* You need to set the style to display:none; so that it does not show
            //* Once you replace the HTML element, it is a different element in
            //* the DOM and no longer referenced by $(this).
            $(this).replaceWith( '<span class="replaced" style="display:none;">Redefining Advanced Wound Care</span>' );

            //* Now look up the new element and fade it in.
            $( 'span.replaced' ).fadeIn(1000);
        });
      
    }

     setTimeout(function(){
         replaceText();
     },5000);

<!-- Now you have to purposively set the new span style to not display the new DOM element, as it is currently not referenced within the JS, i.e. the fadeOut no longer applies to it. You’ll see that the code does another lookup for the new span.replaced and then fades it in. -->