Question

i am show text on a images one after one. so each line has <BR> tag but when text is showing on image using jquery then BR is not properly translated rather empty space is coming at the top of the page.
here is my script

<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);

i am not being able to show new line with text when showing text on the image on after one.
please help me. thanks

Answer 1

You have an issue with your selectors.

Firstly, .HeaderMsg1 :first-child (which really is .HeaderMsg1 *:first-child, which isn’t the same as .HeaderMsg1:first-child) translates to:

Find .HeaderMsg1, after which get any element that resides under it, which also is a first-child from its parent (can be any parent). That will result in all span‘s and br elements, which results in all the br‘s being appended on the first interval.

I believe what you really were after was '.HeaderMsg1 span:first-child' (or something similar), which should give you the effect you are after.

example:
http://jsfiddle.net/49kvB/