Question

这是我第一次在JQuery编写代码。以下是我的代码：

var div = document.getElementById('fadeletters1'),
  letters = div.textContent.split('');

while(div.hasChildNodes()) div.removeChild(div.firstChild);

for(var i = 0; i < letters.length; i++) {
  var letter = document.createElement('span'),
    style = 'opacity ' + (Math.random() * 5 + 1) + 's linear';
  letter.appendChild(document.createTextNode(letters[i]));
  letter.style.WebKitTransition   = letter.style.transition = style;
  letter.style.opacity = 0;
  div.appendChild(letter);
}

setTimeout(function() {
  for(var i = 0; i < div.childNodes.length; i++) {
    div.childNodes[i].style.opacity = 1;
  }
}, 0);

<div id=fadeletters1>Helllooo This is a test for the website</div>

所以这些字母确实淡入，但是在动画开始时，字母有点可见，然后在几秒后消失。我希望它随着时间的推移从0可见性弹出到100可见性。

我想尝试像这个网站那样：http://method.digital/

Answer 1

您正在改变转换发生的速度，而不是想要在转换开始之前更改延迟：

＆＃13;

var div = document.getElementById('fadeletters1'),
  letters = div.textContent.split('');

while(div.hasChildNodes()) div.removeChild(div.firstChild);

for(var i = 0; i < letters.length; i++) {
  var letter = document.createElement('span'),
    style = 'opacity 0.6s linear',
    delay = (Math.random() * 4) + 's';
  letter.appendChild(document.createTextNode(letters[i]));
  letter.style.WebKitTransition   = letter.style.transition = style;
  letter.style.WebKitTransitionDelay   = letter.style.transitionDelay = delay;
  letter.style.opacity = 0;
  div.appendChild(letter);
}

setTimeout(function() {
  for(var i = 0; i < div.childNodes.length; i++) {
    div.childNodes[i].style.opacity = 1;
  }
}, 0);

＆＃13;

<div id=fadeletters1>Helllooo This is a test for the website</div>

＆＃13;

如果你想为多个div运行它，你可以等到第一个完成后再转到下一个（这个例子有时似乎只能运行，确保在运行之前点击刷新）：

＆＃13;

function RunAnimation(target,delay) {
  var div = document.getElementById(target),
      letters = div.textContent.split('');

  while (div.hasChildNodes()) div.removeChild(div.firstChild);
  
  setTimeout(function(){
    for (var i = 0; i < letters.length; i++) {
      var letter = document.createElement('span'),
          style = 'opacity 0.6s linear',
          delay = (Math.random() * 4) + 's';
      letter.appendChild(document.createTextNode(letters[i]));
      letter.style.WebKitTransition = letter.style.transition = style;
      letter.style.WebKitTransitionDelay = letter.style.transitionDelay = delay;
      letter.style.opacity = 0;
      div.appendChild(letter);
    }

    setTimeout(function() {
      for (var i = 0; i < div.childNodes.length; i++) {
        div.childNodes[i].style.opacity = 1;
      }
    }, 0);
  }, delay);
}

RunAnimation('fadeletters1')
RunAnimation('fadeletters2', 5000);
RunAnimation('fadeletters3', 10000);

＆＃13;

<div id="fadeletters1">Helllooo This is a test for the website</div>
<div id="fadeletters2">This is a second div which also fades in</div>
<div id="fadeletters3">And who knows maybe you want a third</div>

＆＃13;

Answer 2

事情是有两个延迟......

一个用于动画，另一个用于超时。这是超时，它真正提供了您正在寻找的效果。

// Get the letters from the original string.
var letters = $("#fadeletters1").text().split("");
// Remove the original string.
$("#fadeletters1").text("");

// Create a span for each letters and append them to the document.
letters.forEach(function(item,index){
  var span = $("<span class='fade'>").text(item);
  $("#fadeletters1").append(span);
});

// Animate each spans
$(document).find(".fade").each(function(){
  // Random delay
  var delay = Math.random();
  var letter = $(this);
  
  // Set a timeout to animate the spans
  setTimeout(function(){
    letter.animate({"opacity":1},delay*1000);
  },delay*3000);
});

.fade{
  opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="fadeletters1">Helllooo This is a test for the website</div>

JQuery Letters随机淡出

2 个答案: