Question

到目前为止，我所做的网站只会动画“var txt”中指定的文字。

我的问题是在第一个函数（typeWriter）执行完毕后尝试将以下元素（图像和一些文本）淡入。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    var i = 0;
    var txt = 'Test';
    var speed = 50;
    window.onload = function typeWriter(callback){
        if (i < txt.length){
        document.getElementById("type").innerHTML += txt.charAt(i);
        i++;
        setTimeout(function(){typeWriter(callback)}, speed);
        }else if(typeof callback == 'function'){
         callback();
        }
    }
    function fader(){
        $("#fade").fadeIn("slow");
    }

    typeWriter(callback);

<!-- Html below -->

    <div class="subSection">
    <div id="fade">
        <h2 id="type"></h2>
        <img src="ring.jpg" alt="rings">
        <p>Now comes in a range of different colours and sizes.<br>Pricing from €149.99</p>
        <p><a href=order.html class="button">Buy Now</a></p>
    </div>
</div>

Answer 1

@Noface比我快，但由于我的解决方案不同，我仍然想发布它。主要区别在于它不会暴露全局变量。这意味着您可以在页面上运行多个实例。

你走了：

function typeWriter(options) {
  // Getting options or using default values
  var settings = {
    element: options.element,
    text: options.text || "Typewriter",
    speed: options.speed || 100,
    complete: options.complete || function() {}
  };

  // Internal state
  var state = {
    i: 0,
    len: settings.text.length
  };
  
  (function writeLetter() {
    if (state.i >= state.len) return settings.complete();
    settings.element.innerHTML += settings.text.charAt(state.i);
    state.i++;
    setTimeout(writeLetter, settings.speed);
  })();
}

function fader() {
  $("#fade").fadeIn("slow");
}

window.onload = function() {
  // Call the function with options
  typeWriter({
    element: document.getElementById("type"),
    text: "Hello world!",
    speed: 50,
    complete: fader
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2 id="type"></h2>
<div id="fade" style="display: none">I'm fading!</div>

Answer 2

修复初始语法错误后，有一些问题需要解决。 onload将触发并传递自己的参数，而不是你想要的回调。因此，将其包装在回调函数中，并使用所选的回调函数调用该函数。或者使用onload = typeWriter.bind(null, fader)将fader作为回调函数传递。接下来，您要在css中将#fade元素设置为display: none，以便它开始隐藏，然后将您的txt #type移到淡入淡出div之外，这样它就可见了，您可以看到你做的自动输入动画。

您可以将typeWriter定义为函数，然后在window.onload事件中调用它：

var i = 0;
var txt = 'Test';
var speed = 50;
function typeWriter(callback){
  if (i < txt.length){
    document.getElementById("type").innerHTML += txt.charAt(i);
    i++;
    setTimeout(function(){typeWriter(callback)}, speed);
  } else if(typeof callback == 'function'){
    callback();
  }
}
function fader(){
  $("#fade").fadeIn("slow");
}
window.onload = function(){
  typeWriter(fader);
}

#fade {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="subSection">
  <h2 id="type"></h2>
  <div id="fade">
    <img src="ring.jpg" alt="rings">
    <p>Now comes in a range of different colours and sizes.<br>Pricing from €149.99</p>
    <p><a href=order.html class="button">Buy Now</a></p>
  </div>
</div>

为什么我的元素不会淡入？

2 个答案: