我试图让不同的引号淡入和淡出正文副本,但也让它们保持在同一行。目前,引号只会出现在单独的一行中,而不是与之前的行相同。
(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>
最佳答案
只需将 display: inline
添加到此 block :
.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>
关于Javascript - 复制淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39701940/