使用jQuery使“光標”閃爍並淡出，以實現打字機效果

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 個解決方案

解決方案1
0 已采納 2019-04-29 23:21:27

解決方案2
0 2019-04-29 23:29:22

解決方案3
0 2019-04-30 00:09:07

使用jQuery使“光標”閃爍並淡出，以實現打字機效果

問題描述

3 個解決方案

解決方案1 0 已采納 2019-04-29 23:21:27

解決方案2 0 2019-04-29 23:29:22

解決方案3 0 2019-04-30 00:09:07

解決方案1
0 已采納 2019-04-29 23:21:27

解決方案2
0 2019-04-29 23:29:22

解決方案3
0 2019-04-30 00:09:07