修復褪色文本在jQuery中使用fadeToggle（）

Question

我試圖使用fadeToggle()使數組中的文本淡入，等待10秒，而不是淡出另一個文本做同樣的事情。

這段代碼的文本每隔幾秒鐘切換完美，我只是不能得到正確的代碼，使其淡入/淡出：

var texts = [" \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ", " \" Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs", " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex ; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs", " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ", " \」 The value of an idea lies in the using of it. \「 <br /> ~ Thomas Edison "]; 
 
var count = 0; 
 

 
$(document).ready(function() { 
 
    function changeText() { 
 
    $(".quote").html(texts[count]); 
 
    count < texts.length ? count++ : count = 0; 
 
    } 
 

 
    setInterval(changeText, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="quote">Hello</h1>

Answer 1

你可以按照這個邏輯：

1. 淡出。
2. 更改文字。
3. 淡入。

var texts = [" \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ", " \" Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs", " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex ; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs", " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ", " \」 The value of an idea lies in the using of it. \「 <br /> ~ Thomas Edison "]; 
 
var count = 0; 
 

 
$(document).ready(function() { 
 
    function changeText() { 
 
    $(".quote").fadeOut(250, function() { 
 
     $(this).html(texts[count]).fadeIn(250); 
 
    }); 
 
    count < texts.length ? count++ : count = 0; 
 
    } 
 
    setInterval(changeText, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="quote">Hello</h1>

Answer 2

要在文本淡入淡出，你需要把它們放在不同的元素，並根據需要在/淡入淡出他們。您只能通過更改元素的text屬性來實現淡入淡出效果。

考慮到這一點，您可以將h1元素放置在一個包含中，並將它們絕對放置以使它們重疊。然後您可以使用鏈接的setTimeout調用來淡化所需的內容。試試這個：

var texts = [" \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ", " \" Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs", " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex ; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs", " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ", " \」 The value of an idea lies in the using of it. \「 <br /> ~ Thomas Edison "]; 
 
var count = 0; 
 

 
$(document).ready(function() { 
 
    function changeText() { 
 
    $('.quote').fadeOut(function() { 
 
     $(this).remove(); 
 
    }); 
 
    $('<h1 class="quote">' + texts[count % texts.length] + '</h1>').appendTo('.quote-container').fadeIn(); 
 
    count++; 
 
    setTimeout(changeText, 3000); 
 
    } 
 

 
    changeText(); 
 
});

.quote-container h1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="quote-container"> 
 
    <h1 class="quote">Hello</h1> 
 
</div>

還要注意使用模運算符（%）在三元的檢查count值。

Answer 3

另一種方法。

我知道這個問題詢問jQuery fadeToggle()，但我想建議CSS @keyframes可能是這種動畫演示文稿的最佳工具。

工作實例使用CSS：

var texts = [ 
 
    " \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ", 
 
    " \" Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs", 
 
    " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs", 
 
    " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ", 
 
    " \" The value of an idea lies in the using of it. \" <br /> ~ Thomas Edison " 
 
]; 
 

 

 
var count = 0; 
 
var quote = document.getElementsByClassName('quote')[0]; 
 

 
function changeText() { 
 
    quote.innerHTML = (texts[count]); 
 
    count < (texts.length - 1) ? count++ : count = 0; 
 
} 
 

 
setInterval(changeText, 6000);

.quote { 
 
animation: fadeToggle 6s infinite; 
 
} 
 

 
@keyframes fadeToggle { 
 
0% {opacity: 0;} 
 
33% {opacity: 1;} 
 
66% {opacity: 1;} 
 
100% {opacity: 0;} 
 
}

<h1 class="quote">Hello</h1>