Javascript - Copy fading in and out

Question

I'm trying to have different quotes fade in and out of the body copy, but also keeping them on the same line. At the moment the quotes will only appear a separate line, rather than the same as the line before.

 (function() { var quotes = $(".quotes"); var quoteIndex = -1; function showNextQuote() { ++quoteIndex; quotes.eq(quoteIndex % quotes.length) .fadeIn(2000) .delay(2000) .fadeOut(2000, showNextQuote); } showNextQuote(); })(); 

 .quotes { display: none; overflow: hidden; white-space: nowrap; } .intro { width: 800px; overflow: hidden; white-space: nowrap; } .h2 { overflow: hidden; display: inline; } .intro h1, .intro h2 { overflow: hidden; vertical-align: top; font-size: 24px; } .intro h1 { font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="intro"> <h1>Hello, my name is I am a</h1> <h2 class="quotes">quote 1</h2> <h2 class="quotes">quote 2</h2> <h2 class="quotes">quote 3</h2> <h1>currently based in London, GBR</h1> </div> 

http://jsfiddle.net/n4mKw/4220/

Answer 1

Just add display: inline to this block:

.intro h1,
.intro h2 {
  overflow: hidden;
  vertical-align: top;
  font-size: 24px;
  display: inline;
}

Example...

 (function() { var quotes = $(".quotes"); var quoteIndex = -1; function showNextQuote() { ++quoteIndex; quotes.eq(quoteIndex % quotes.length) .fadeIn(2000) .delay(2000) .fadeOut(2000, showNextQuote); } showNextQuote(); })(); 

 .quotes { display: none; overflow: hidden; white-space: nowrap; } .intro { width: 800px; overflow: hidden; white-space: nowrap; } .intro h1, .intro h2 { overflow: hidden; vertical-align: top; font-size: 24px; display: inline; } .intro h1 { font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="intro"> <h1>Hello, my name is I am a</h1> <h2 class="quotes">design addict</h2> <h2 class="quotes">avid doodler</h2> <h2 class="quotes">casual coder</h2> <h1>currently based in London, GBR</h1> </div>