1

jqueryを使用してタイプライティング効果を行っていますが、このコードを見つけて、必要に応じて完全に機能するように編集しました。

しかし、ループを止めることができないという問題があります。

最後の段落が印刷されていることを検出しようとしたので、その後に機能を追加できませんでした。

アドバイスやヒントをいただければ幸いです。

コードは次のとおりです。

http://jsbin.com/araget/33/

(function ($) {

  function typeString($target, str, cursor, delay, cb) {
    $target.html(function (_, html) {
      return html + str[cursor];
    });

    if (cursor < str.length - 1) {
      setTimeout(function () {
        typeString($target, str, cursor + 1, delay, cb);
      }, delay);
    }
    else {
      cb();
    }
  }

  function deleteString($target, delay, cb) {
    var length;

    $target.html(function (_, html) {
      length = html.length;
      return html.substr(0, length - 1);
    });

    if (length > 1) {
      setTimeout(function () {
        deleteString($target, delay, cb);
      }, delay);
    }
    else {
      cb();
    }
  }

  // jQuery hook
  $.fn.extend({
    teletype: function (opts) {
      var settings = $.extend({}, $.teletype.defaults, opts);

      return $(this).each(function () {
        (function loop($tar, idx) {
          // type
          typeString($tar, settings.text[idx], 0, settings.delay, function () {
            // delete
            setTimeout(function () {
              deleteString($tar, settings.delay, function () {
                loop($tar, (idx + 1) % settings.text.length);
              });
            }, settings.pause);
          });

        }($(this), 0));
      });
    }
  });

  // plugin defaults  
  $.extend({
    teletype: {
      defaults: {
        delay: 100,
        pause: 5000,
        text: []
      }
    }
  });
}(jQuery));

$('#target').teletype({
  text: [
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
    'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
    'magna aliquyam erat, sed diam voluptua. At vero eos et'
  ]
});

$('#cursor').teletype({
  text: ['_', ' '],
  delay: 0,
  pause: 500
});
4

2 に答える 2

0

setTimeout()ハンドラーからハンドラーを取得して実行する必要がありますclearTimeout()。

var handler = setTimeout(function () {
        typeString($target, str, cursor + 1, delay, cb);
      }, delay);
....
clearTimeout(handler);

編集:停止ルーチンを配置する場所を説明するためにコードを変更しました。

このリンクを確認してください: http://jsbin.com/enukit/1

ロジックをもう少しきれいにする必要があります。カーソルを点滅させるために使用されるループを停止するつもりだったので、カーソルはオプションで分離または設定する必要があります。

(function ($) {
  // writes the string
  //
  // @param jQuery $target
  // @param String str
  // @param Numeric cursor
  // @param Numeric delay
  // @param Function cb
  // @return void

  var handler1, mycount=0, handler2, handler3;
  function typeString($target, str, cursor, delay, cb) {
    $target.html(function (_, html) {
      return html + str[cursor];
    });
    //alert('cursor:'+cursor);
    //alert('str.length:'+str);
    if (cursor < str.length - 1) {
      handler1 = setTimeout(function () {
        typeString($target, str, cursor + 1, delay, cb);
      }, delay);
    }
    else {
      cb();
    }
  }

  // clears the string
  //
  // @param jQuery $target
  // @param Numeric delay
  // @param Function cb
  // @return void
  function deleteString($target, delay, cb) {
    var length;

    $target.html(function (_, html) {
      length = html.length;
      return html.substr(0, length - 1);
    });

    if (length > 1) {
      handler2 = setTimeout(function () {
        deleteString($target, delay, cb);
      }, delay);
    }
    else {
      cb();
    }
  }

  // jQuery hook
  $.fn.extend({
    teletype: function (opts) {
      var settings = $.extend({}, $.teletype.defaults, opts);
      $(this).each(function () {
mycount=0;
        (function loop($tar, idx) {
        mycount ++;
          // type
          typeString($tar, settings.text[idx], 0, settings.delay, function () {
            // delete
            clearTimeout(handler1);
            handler3 = setTimeout(function () {
              deleteString($tar, settings.delay, function () {
                if (mycount<settings.text.length) {
                  loop($tar, (idx + 1));} else {
clearTimeout(handler3);
                    alert('The end!');
                  }
              });
            }, settings.pause);
          });

        }($(this), 0));
      });

    }
  });

  // plugin defaults  
  $.extend({
    teletype: {
      defaults: {
        delay: 100,
        pause: 5000,
        text: []
      }
    }
  });
}(jQuery));

$('#target').teletype({
  text: [
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
    'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
    'magna aliquyam erat, sed diam voluptua. At vero eos et'
  ]
});
/*
$('#cursor').teletype({
  text: ['_', ' '],
  delay: 0,
  pause: 500
});
*/
于 2013-02-13T19:18:28.127 に答える
0

アニメーションのループを停止するパラメーターを追加し、アニメーションの最後に呼び出されるコールバックとして設定する別のパラメーターを追加できます。foreverと言ってみましょうend。

// plugin defaults  
$.extend({
  teletype: {
    defaults: {
      delay: 100,
      pause: 5000,
      text: [],
      forever: true,
      end: $.noop
    }
  }
});

に設定foreverするtrueと、アニメーションが無限にtext続き、最後の要素に到達した後の最初の要素から再開されます。に設定foreverするfalseと、最初の繰り返しに達した後に停止します。

endアニメーションの最初の繰り返しが完了したときに呼び出されるコールバック関数に設定します。このオプションは にforever設定する必要がfalseあります。そうしないと呼び出されません。

使用する：

if (settings.forever || (idx + 1 < settings.text.length)) {
  loop($tar, (idx + 1) % settings.text.length);
} else {
  settings.end.call(self);
}

それ以外の

loop($tar, (idx + 1) % settings.text.length);

これらの変更を適用するteletypeと、適切なパラメーターで呼び出すことができます。

$('#target').teletype({
  text: [
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
    'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
    'magna aliquyam erat, sed diam voluptua. At vero eos et'
  ],
  forever: false,
  end: function(){
    alert("Teletype is done!");
  }
});

ここで見ることができます。

于 2013-02-13T19:47:03.663 に答える