Fadein not working

Question

In this jsfiddle the text displays, fades away and is replaced by other text. The fading away works fine but the new text is supposed to fade in and that isn't working. I found a lot of questions like this and all of the solutions said to hide the container the text is in. Some said to use hide() and others said to use display:none. I tried both but neither make a difference. Here's my code. Any ideas on how to make the text fade out?

<div id="mb-holder" class="mb">
    <div class="mb-align">
        <span id="mb-test"></span>  
    </div>
</div>

<script>
    var msg1 = 'Message 1';
    var msg2 = 'Message 2';

    $("#mb-test").html(msg1);  

    setInterval(swapmessages, 2000);

    function swapmessages() {
        setTimeout(function(){
            $("#mb-test").fadeOut(2000, function() { 
                $(this).hide();               
                $(this).load(function() { $(this).fadeIn(2000); }); 

                var curmsg = $(this).html();

                if (curmsg == msg1) {
                   $(this).html(msg2);    
                } else { 
                   $(this).html(msg1); 
                }
                $(this).css("display","inline"); 
            }); 
        });
    } 
</script>    

Answer 1

You have two issues. Firstly your use of the load event handler on the div element will never be fired. Secondly you're setting the display of the element which is immediately over-riding the fade animation.

You can also tidy up the logic slightly by providing text() with a function to toggle the message being displayed and chaining the delay with setTimeout() so that the delay and fade are intrinsically linked. Try this:

var msg1 = 'Message 1';
var msg2 = 'Message 2';
$("#mb-test").html(msg1); 
swapmessages();

function swapmessages() {
    $("#mb-test").fadeOut(2000, function() {
        $(this).text(function(i, t) {
            return t.trim() == msg1 ? msg2 : msg1;
        }).fadeIn(2000);
        setTimeout(swapmessages, 2000);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mb-holder" class="mb">
    <div class="mb-align">
        <span id="mb-test"></span>
    </div>
</div>

Answer 2

As Tim stated, you don't need that load function:

$(this).load(function() { $(this).fadeIn(2000); });

It attaches onLoad event to the span element every time you go to swapmessages function. You can read about this function in jQuery documentation here.

Also, no need to hide a container and change a CSS display property:

$(this).hide();
$(this).css("display","inline");

I just added a fiddle where you can see messages being swapped and fading is repeated.