Javascript-復制淡入和淡出

Question

我試圖使不同的引號淡入和淡出正文，但也要使它們保持同一行。 目前，引號只會出現在單獨的行中，而不是之前的行。

 (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

只需在此塊中添加display: inline ：

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

例...

 (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>