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>