jQuery Fading Issue

I'm doing a minimal-style validation response for my login box. There's not a lot of space, so I change "Login" to say "Invalid Login. Forgot Password?" in a nice fading animation. I had it working previously when I merely inserted "Invalid" before "Login" rather than fa开发者_如何转开发ding out then in the entire span.

When it comes to my code, the former span doesn't disappear and the latter span just shows up below, as if I am doing .show(). Also, no fading whatsoever occurs, which is odd.

Here's my markup:

<span id="oldLoginProblem"><h3>Login</h3></span>
<span id="newLoginProblem" style="color: red; font-weight: bold;"><h3>Invalid Login &#183; <a href='recover'>Forgot Password?</a></h3></span>

Here's the jQuery (this runs on validation error):

if(data == "Invalid")
            {
                $('#oldLoginProblem').fadeOut('slow', function(){
                    $('#newLoginProblem').fadeOut('slow', function(){
                        $('#newLoginProblem').fadeIn('slow');
                    });
                });
            }

Any help?

As noted in other answers, you cannot have a block element in an inline element (h3 in a span).

If you change your spans to inline-block, it works, but I don't know if that has other consequences with regard to your layout.

span {
     display: inline-block;  
}

your fading problem is probably caused by the fact that span is an inline element:

http://jsfiddle.net/proudlygeek/AUC5v/

Update

Here's a snippet containing the fading effect you want:

$('#loginProblem').fadeOut('slow', function() {
    $(this).html("<h3>Invalid Login &#183; <a href='recover'>Forgot Password?</a></h3>");
    $(this).css({
        'color': 'red',
        'font-weight': 'bold'
    });
    $(this).fadeIn('slow');
});

See it in action on jsFiddle

There appears to be an issue with calling .fadeOut() with an <h3/> element inside a <span/> (which is invalid markup as you can not have a block level element inside of an inline element)

With that being said you can get the fadeOut() effect to work by using .children()

$('#oldLoginProblem').children().fadeOut('slow', function() {
    $('#newLoginProblem').children().fadeOut('slow', function() {
        $('#newLoginProblem').children().fadeIn('slow');
    });
});

Code Example on jsfiddle

Another option would be to simply adjust your markup to be valid and the fadeOut will work correctly.

<h3 id="oldLoginProblem"><span>Login</span></h3>
<h3 id="newLoginProblem"><span  style="color: red; font-weight: bold;">Invalid Login &#183; <a href='recover'>Forgot Password?</a></span></h3>

Code Example on jsfiddle