jquery - jQuery淡入每个字母

Question

我的褪色有一个小问题。基本上，当我淡化第一个字母时，第二个字母移到左边，占据第一个字母的位置。有没有办法阻止这种情况？如果有怎么办？

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

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

Answer 1

而不是使用该display属性，您应该使用visibility. 不幸的是 jQuerydisplay在显示/隐藏中使用，所以你必须手动完成。

$('.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 ); 
});

并在 CSS 中更改display:none为。visibility:hidden通过在最后将可见性设置回隐藏来节省一些处理能力也是值得的，尽管好的浏览器会知道无论如何都不会渲染不透明度为 0 的东西。