javascript - Javascript-复制淡入和淡出

我试图使不同的引号淡入和淡出正文，但也要使它们保持同一行。目前，引号只会出现在单独的行中，而不是之前的行。

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

最佳答案

只需将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>