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>

,132 10