jQuery中可暂停的打字机效果

Pausable typewriter effect in jQuery

本文关键字：打字机 暂停 jQuery      更新时间：2023-09-26

我正在使用Jason Frame的Grab Bag中的打字机插件。

然而，我现在发现自己的处境是，我需要能够在这台打字机运行的任何时候暂停并恢复使用。

理想情况下，我会让.typewriter("pause")暂停它，.typewriter("resume")从它停止的地方恢复动画

我已经尝试在插件中设置一个paused变量，并在每次迭代时检查变量，使间隔运行——如果为true，则不执行任何操作。

然而，由于我缺乏制作jQuery插件的技能，每次我调用函数暂停打字机时，它都会重新开始。我怀疑paused变量被重置了。

我该如何让这个插件变得可怜？

jsBin演示

在此处添加这2行：

(function($) {      
    $.fn.typewriter = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), progress = 0;
            $ele.text('');
            timer = setInterval(function() {
              if(pause===false){    // ADD THIS LINE ////////////////////////
                  $ele.text(str.substring(0, progress++) + (progress & 1 ? '_' : ''));
                  if (progress >= str.length) clearInterval(timer);
              }                     // ADD THIS LINE ////////////////////////
            }, 100);
        });
        return this;
    };   
})(jQuery);
$("#typewriter").typewriter(); // run your plugin

我创建了这个：

var pause = false;
$('#play_pause').click(function(){
  pause= !pause ? true : false;    // toggle true/false pause states
});

编辑：在下面的评论中找到一个更好的类似插件的解决方案！

相关文章：