jqueryで改行文字が正しく描画されない

Question

イメージ上にテキストを1つずつ表示しています。各行には<BR>というタグがありますが、jqueryを使用してテキストに画像が表示されていると、BRは正しく翻訳されません。ページの上部に空白が表示されます。ここ は1後の画像上にテキストを表示するとき、私はテキストで新しい行を表示することができるというわけではない私のスクリプト

<div id="HeaderMessage" class="HeaderMsg1"> 
<span class="HeaderMsg">A LIFETIME WARRANTY FOR EVERY PART WE REMANUFACTURE.<br/>We reengineer the faults out of parts so they won't fail again. Guaranteed.</span> 
<span class="HeaderMsg">PROFIT FROM ENGINEERING EXPERTISE.<br/>We offer you reliable parts, low prices and easy access to automotive knowledge.</span> 
<span class="HeaderMsg">JOIN US FOR A CAREER THAT CAN TAKE YOU FURTHER, FASTER. <br/>Reengineer your future with a world leader in the remanufacture of electronic automotive parts.</span> 
<span class="HeaderMsg">THE SENSIBLE CHOICE IS THE GREENER CHOICE TOO.<br/>Our parts save precious raw materials, reduce automotive waste and require less CO2 to produce. </span> 
</div> 

$('.HeaderMsg1 span:gt(0)').hide(); 
    setInterval(function() { 
    $('.HeaderMsg1 :first-child').fadeOut() 
    .next('span').fadeIn() 
    .end().appendTo('.HeaderMsg1'); 
}, 5000); 

です。 私を助けてください。ありがとう

Answer 1

セレクタに問題があります。

まず、.HeaderMsg1 :first-childは（本当に.HeaderMsg1 *:first-childである、.HeaderMsg1:first-childと同じではありません）に変換します。

もその親からfirst-childである、その下にあるすべての要素を取得した後、.HeaderMsg1を探します（任意の親にすることができます）。その結果、すべてspanとbrの要素になり、その結果、すべてのbrが最初の間隔で追加されます。

'.HeaderMsg1 span:first-child'（またはそれに類するもの）だったと思っています。それはあなたが後になる効果を与えるはずです。

例：アイデアはあなたがそれぞれの「HeaderMsg」の後にスペースを必要とするということである http://jsfiddle.net/49kvB/