1

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

但是，我现在发现自己需要能够在运行过程中的任何时候暂停和恢复这台打字机。

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

我尝试paused在插件中设置一个变量，并在每次迭代时检查变量的间隔运行——如果为真，则什么也不做。

但是，由于我制作jQuery插件的技术欠缺，每次调用该函数暂停打字机，就又重新开始了。我怀疑paused变量被重置了。

我将如何使这个插件可以暂停？

4

1 回答 1

1

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
});

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

于 2012-08-27T00:19:56.387 回答