I'm looking to develop a basic text slideshow that smoothly transitions between phrases and loops continuously. However, I've run into an issue where the slideshow malfunctions when I add a line break in the text. It only seems to work properly when the text is on a single line. Any help or guidance on this matter would be highly appreciated.
Below is the code snippet along with a link to the jsFiddle for reference: http://jsfiddle.net/rezasan/fnbn8sbc/
//HTML
<div id="index_splashtext">
<h3>An<br/>Intimate<br/>Hideaway</h3>
<h3>A<br/>Paradise<br/>Preserved</h3>
</div>
//CSS
#index_splashtext {
width:311px;
margin:0 auto;
height: 330px;
margin-top: 25px;
text-align:center;
}
#index_splashtext h3 {
position: absolute;
font-size: 4.5em;
line-height: 1.2em;
font-family: "adobe-garamond-pro",sans-serif;
letter-spacing: 0.05em;
font-weight: 400;
margin-bottom: 70px;
color: red;
}
//jQuery
$(function(){
$('#index_splashtext h3:gt(0)').hide();
setInterval(function(){
$('#index_splashtext :first-child').fadeOut(2500)
.next('h3').fadeIn(2500)
.end().appendTo('#index_splashtext');},
8000);
});