jQueryの幅の変更（アニメーション）はFirefox/IEで垂直シフトを引き起こしますか？

Question

ここで例（ヘッダをチェックアウト）：このコードを使用してhttp://brendonoliverlamb.com/

：

$('.flipper').wrap('<span id="tmp"></span>'); 
    $('#tmp').css({ width: $('.flipper').outerWidth() + 'px' }); 
    $('.flipper').fadeOut(500, function() { 
     $(this).html(flipWords[flipperCountCurrent]); 
     $('#tmp').animate({ width: $(this).outerWidth() + 'px' }, 250); 
     $(this).fadeIn(500, function() { 
      $(this).unwrap(); 
     }); 
    }); 

私が午前問題はフリッピングれる単語の周りの言葉がアニメーション中にシフトしているが...

私はちょうど「フリッパー」CLAをしたい、それがフェードアウトとは何か、多分高さ変化を持っていますが、私の人生のために、私は解決策を見つけていない...

おそらく推測されました。/

Answer 1

私はそれがしなければならないかもしれないと思う：単語を変更するには、SS要素は

フェードインは、このいずれかのプラグインを見つけることができませんでした、右のフィットにテキストように、幅を調整し、フェードアウトsmoothly- jQueryはアニメーションのある時点でspanをdisplay: blockに設定します。 .flipper {display: inline !important}を設定すると、それは私にとってはうまくいくようです。

Answer 2

私はいくつかの問題を発見しました。一部のブラウザでは、長い単語に切り替えるとワープロが発生し、すべてのブラウザで垂直方向の配置問題が発生しました。より孤立した方法で問題を見ることができます：http://jsfiddle.net/jfriend00/BSmwF/そして、あなたは、一時的なワードラップを引き起こす短い単語をより長い単語が置き換えた場合にのみジャンプが起こることをはっきりと見ることができます。

また、コードを大幅に簡略化しました。ラップアンドラップする必要はありません。

あなたはワードラップを防ぎ、アライメント問題を修正このCSSを追加する場合、問題が消える：

.flipper { 
    white-space: nowrap; 
    overflow: hidden; 
    vertical-align: bottom; 
} 

がここにデモの作業：http://jsfiddle.net/jfriend00/EgfYU/

そして、私はラップなしでシンプルなコードに変更/アンラップとスパンが唯一それが不透明に変更してdisplay: noneに設定されることは決してありませんのしているので、fadeTo()を使用：

//Flipper 
var flipWords = ["a professional", "an experienced", "an innovational", "an enthusiastic"]; 


//Do not edit below// 
//set initial 
$(".flipper").html(flipWords[0]); 
var flipperCountCurrent = 0; 
setTimeout(flipper, 1500); 
function flipper() { 

    if (flipperCountCurrent < flipWords.length - 1) { 
     flipperCountCurrent += 1; 
    } else { 
     flipperCountCurrent = 0; 
    } 

    //no animation 
    // $(".flipper").html(flipWords[flipperCountCurrent]); 

    var flipperSpan = $('.flipper'); 
    var origWidth = flipperSpan.width(); 
    flipperSpan.fadeTo(500, 0, function() { 
     flipperSpan.html(flipWords[flipperCountCurrent]).css("width", "auto"); 
     var newWidth = flipperSpan.width(); 
     flipperSpan.width(origWidth) 
      .animate({ width: newWidth + 'px' }, 250) 
      .fadeTo(500, 1); 
    }); 

    setTimeout(flipper, 1500); 

} 

注意、デバッグ中のサイクリングの高速化のためにタイマー時間を変更しました。