使用jquery使"光标"闪烁和淡出以达到打字机效果

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

<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*****/

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

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

/*****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/

我稍微改变了你的方法，在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
  }
}

使用我的.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>

相关内容

最新更新

热门标签：