Question

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

但是，我现在发现自己处于这样一种情况：我需要能够在其运行期间的任何时刻暂停和恢复该打字机。

理想情况下，我有.typewriter("pause")暂停它，.typewriter("resume")从中断处继续播放动画。

我已尝试在插件中设置paused变量，并在每次迭代时检查变量是否保持运行 - 如果为true，则不执行任何操作。

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

我如何才能使这个插件可以使用？

Answer 1

jsBin demo

在这里添加以下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
});

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

jQuery中的可打包打字机效果

1 个答案:

jsBin demo