Question

我已经创建了在JS中输入和删除文本动画效果的函数。但是，我只是在类型函数完全执行后才调用擦除函数？我试过setTimeout似乎无法工作。帮助赞赏！

var clength = 0;var caption = 'MyName';var x = 1;var y = x/2;


$(document).ready(function() {
  setInterval('cursorAnimation()', 600);
  ding = $('#caption');
  type();
});

function type() {
  ding.html(caption.substr(0, clength++));
  if (clength < caption.length + 1) {
    setTimeout('type()', 180);
  } else {
    clength = 0;
    caption = '';
  }
}

function erase() {
  ding.html(caption.substr(0, clength--));
  if (clength >= 0) {
    setTimeout('erase()', 50);
  } else {
    clength = 0;
    caption = '';
  }
}

function cursorAnimation() {
  $('#cursor').animate({
    opacity: 0
  }, 'fast', 'swing').animate({
    opacity: 1
  }, 'fast', 'swing');
}

Answer 1

嗯，有不同的方法可以做到这一点。

首先，我必须说你使用setTimeout的方式并不是最好的。通过将字符串表达式放入其中，您可以使JS引擎通过eval解析表达式。一个必须尽可能避免的缓慢而简单的危险事物;除了它真的需要。

在这种情况下，您只需将函数作为setTimeout的参数传递，它也可以正常工作。所以，setTimeout(type, 180)。

现在我理解你的代码type()和erase()都是递归函数，它们可以自己调用或在到达结束后完成执行。＆＃34;到达终点后完成执行＆＃34;正是你需要的代码分支，所以你只需要一个擦除调用。

} else {
    clength = 0;
    caption = '';
    erase();
}

现在，您可能希望在type()强制调用erase()的情况下保存function type(callback) { return function(){ ding.html(caption.substr(0, clength++)); if (clength < caption.length + 1) { setTimeout('type()', 180); } else { clength = 0; caption = ''; if (callback != undefined) callback(); } } }功能的可能性。在你的情况下，我将它封装在一个闭包中，如下所示：

type

在这种情况下，您的type(erase)函数将成为第一类函数，即生成其他函数的函数。当您使用callback调用它时，它将erase写为callback并返回一个变量范围包含type()的函数，以便它可以调用它，因为它是它自己的局部变量。 / p>

如果你致电callback，它会创建一个未定义function type(callback) { return function(){ ding.html(caption.substr(0, clength++)); if (clength < caption.length + 1) { setTimeout(type(callback), 180); } else { if (callback != undefined) callback(); } } }的函数，因此在这种情况下没有任何反应。

修改：

@Id

Answer 2

这是一个仅限CSS的解决方案：

.caption {
  display: inline-block;
  box-sizing: content-box;
  white-space: nowrap;
  overflow: hidden;
  font-family: monospace;
  border-right: 1px solid;
  animation-name: typing, cursor;
  animation-duration: 5s, 1s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(23, end), linear;
}

@keyframes typing {
  0% {
    width: 0;
  }
  
  20% {
    width: 0;
  }
  
  60% {
    width: 165px;
  }
  
  80% {
    width: 165px;
  }
  
  100% {
    width: 0;
  }
}

@keyframes cursor {
  from {
    border-right: 1px solid;
  }
  
  to {
    border-right: 1px transparent;
  }
}

<span class="caption">My name is Hritik Gupta</span>

类型和擦除效果的文本动画计时问题

2 个答案: