Question

我正在使用jquery在div上设置打字机效果。我没有使用CSS来执行此操作，因为该句子将覆盖多于1行。我面临的问题是使光标闪烁，然后在键入行时逐渐消失。

HTML：

<div class="typewriter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

JS

/*****Start Typewriter effect*****/
  $('.typewriter').css('display', 'none');
  setTimeout(function(){
    $('.typewriter').css('display', 'flex');

    var str = $('.typewriter').html() + 1,
    i = 0,
    isTag,
    text,
    cursor = "|",
    timer;

    (function type() {
      text = str.slice(0, ++i);
      if (text === str){ 
        return;
      }
      $('.typewriter').html(text + " " + cursor);
      timer = setTimeout(type, 40);
    }());
  }, 300);
  /*****End Typewriter effect*****/

这是一个jsfiddle https://jsfiddle.net/ht4569wv/

Answer 1

只需验证您已经完成的效果何时完成，并设置另一个计时器来使光标闪烁：

/*****Start Typewriter effect*****/
  $('.typewriter').css('display', 'none');
  setTimeout(function(){
    $('.typewriter').css('display', 'flex');

    var str = $('.typewriter').html(),
    i = 0,
    isTag,
    text,
    cursor = "|",
    timer;

    (function type() {
      text = str.slice(0, ++i);
      if (text === str){ 
        i = 0;
        blink();
        return;
      }
      $('.typewriter').html(text + " " + cursor);
      timer = setTimeout(type, 40);
    }());

    function blink() {
      i++;
      const foo = str + " " + (i%2 ? cursor : '');
      $('.typewriter').html(foo);
      if (i < 10) timer = setTimeout(blink, 600);
      else fade();
    }

    function fade() {
        $('.typewriter').html(str);
    }

  }, 300);
  /*****End Typewriter effect*****/

演示：https://jsfiddle.net/y2s3fv6d/

Answer 2

我已经稍微改变了您的方法，并借助CSS创建了一个闪烁的光标。

这是JSfiddle：https://jsfiddle.net/mkbctrlll/65ay3q8o/72/

JS：

var $typewriter = $('.typewriter')

/*****Start Typewriter effect*****/
setTimeout(function() {

  console.log('Start!')
  $typewriter.css('display', 'block');

  var str = $typewriter.html() + 1,
    i = 0,
    isTag,
    text,
    cursor = document.createElement('span'),
    timer;

  cursor.classList.add('cursor');


  (function type() {
    text = str.slice(0, ++i);

    if (text === str) {
        console.log('Done')

      setTimeout(function() {
        $(cursor).addClass('hidden')
      }, 2000);
      return;
    }

    $typewriter.html(text + " ");
    $typewriter.append(cursor)

    timer = setTimeout(type, 0);

  }());
}, 300);

/*****End Typewriter effect*****/

CSS：

.typewriter {
  display: none;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
}

.cursor {
  transition: opacity 0.6s;
  border-right: .15em solid orange; /* The typwriter cursor */
  animation: blink-caret .5s step-end infinite;
}

.cursor.hidden {
   opacity: 0
}

/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange
  }
}

Answer 3

使用我的.typeText函数。

//<![CDATA[
/* external.js */
$(function(){ // jQuery onload
$.fn.extend({
  typeText:function(interval){
    var t = this, s = this.text().split(''), ti, i = 0;
    this.text(s[0]+'|');
    ti = setInterval(function(){
      t.text(t.text().replace(/\|$/, ''));
      if(s[++i]){
        t.append(s[i]+'|');
      }
      else{
        clearInterval(ti);
      }
    }, interval);
  }
});
$('.typeview').css('display', 'block').each(function(i, e){
  $(e).typeText(50);
});
}); // jQuery onload end
//]]>

/* external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#content{
  padding:10px;
}
.typeview{
  display:none; text-align:justify; background:#fff; padding:8px 10px;
}

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div id='content'>
    <div class='typeview'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</body>
</html>

使用jQuery使“光标”闪烁并淡出，以实现打字机效果

3 个答案: