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>