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

您可以遵循以下逻辑：

淡出。
更改文字。
淡入。

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的工作示例：

＆＃13;

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);

＆＃13;

.quote {
animation: fadeToggle 6s infinite;
}

@keyframes fadeToggle {
0% {opacity: 0;}
33% {opacity: 1;}
66% {opacity: 1;}
100% {opacity: 0;}
}

＆＃13;

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

＆＃13;

使用JQuery中的fadeToggle（）修复淡入淡出的文本

3 个答案: