在 JQuery 中使用 fadeToggle() 修复淡入淡出的文本

Question

我正在尝试使用 fadeToggle() 使数组中的文本淡入，等待 10 秒，然后淡出另一个文本来做同样的事情。

此代码完美地每隔几秒切换一次文本，我只是无法获得使它淡出的正确代码in/out：

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

你可以遵循这个逻辑：

淡出。
更改文本。
淡入。

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

要在文本中交叉淡入淡出，您需要将它们放在单独的元素中并根据需要淡入淡出 in/out。您无法仅通过更改元素的 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>

在 JQuery 中使用 fadeToggle() 修复淡入淡出的文本

Fixing Fading Text Using fadeToggle() in JQuery

html

javascript

jquery

fadein