CODEWITHSUNDEEP
jqueryfadeinfadefadeout
Michael Libman
Michael Libman

Reputation: 73

jQuery fade in each letter

I have a small problem with my fades. Basically when I fade the first letter the second one moves over to the left taking the first letters place. Is there a way to stop this? If so how?

$('.m').fadeIn( 4000, function() {
    $('.i').fadeIn( 3000, function() {
        $(this).fadeOut( 2000, function() {
            $('.full' ).fadeOut( 3000 );
        } );    
    } );
    $(this).fadeOut( 3000 );    
} );

jFiddle: http://jsfiddle.net/MRvfC/

Upvotes: 0

Views: 507

Answers (1)

Dave
Dave

Reputation: 46359

Instead of using the display property, you should use visibility. Unfortunately jQuery uses display in show/hide, so you'll have to do it manually.

$('.m').css( {'opacity':0,'visibility':'visible'} ).animate( {'opacity':1}, 4000, function() {
    $('.i').css( {'opacity':0,'visibility':'visible'} ).animate( {'opacity':1}, 3000, function() {
        $(this).animate( {'opacity':0}, 2000, function() {
            $('.full' ).animate( {'opacity':0}, 3000 );
        } );    
    } );
    $(this).animate( {'opacity':0}, 3000 ); 
});

and change display:none to visibility:hidden in the CSS. It's also worth saving some processing power by setting visibility back to hidden at the end, although good browsers will know not to render something with 0 opacity anyway.

Upvotes: 2

Related Questions