CODEWITHSUNDEEP
javascriptjqueryhtmlcssslideshow
Reza San
Reza San

Reputation: 230

Text slideshow with jQuery not functioning correctly when there's <br>

I'm trying to create a simple text slideshow which transits between a phrase to another and loop itself but when I added a break rule to the text, the slideshow doesn't seem to function correctly. It only works when the text is a single line. Your assistance would be greatly appreciated.

Here's the code and jsFiddle: 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);
});

Upvotes: 0

Views: 58

Answers (2)

Chris Greene
Chris Greene

Reputation: 21

well this is how i achieved your desired effect, and it is scalable too :)

html:

<div id="index_splashtext">
<h3></h3>
</div>

javascript:

$(function(){
    var messages=[];
    var counter=0;
    var fadeInLength = 2500;
    var fadeOutLength = 2500;
    var hold = 1000;
    messages.push('An<br />Intimate<br />Hideaway');
    messages.push('A<br />Paradise<br />Preserved');

    $('#index_splashtext h3').hide();

    setInterval(function(){
        $('#index_splashtext :first-child').
        html(messages[counter]).
        fadeIn(fadeInLength).
        delay(hold).
        fadeOut(fadeOutLength);

        counter++;
        if(counter > messages.length-1){counter=0;}
        },fadeInLength+fadeOutLength+hold + 1000);
});

Upvotes: 1

j08691
j08691

Reputation: 207913

You want to use $('#index_splashtext h3:first') instead of $('#index_splashtext :first-child'). In this case, :first-child is also being applied to the <br /> elements, so they get hidden but never faded back in:

$(function () {
    $('#index_splashtext h3:gt(0)').hide();
    setInterval(function () {
        $('#index_splashtext h3:first').fadeOut(2500)
            .next('h3').fadeIn(2500)
            .end().appendTo('#index_splashtext');
    },
    8000);
});

jsFiddle example

Upvotes: 2

Related Questions