0

私はjquery関数を実行して、アニメーションをテキスト段落に変換しています。Stackoverflowで良い例を見つけ、それを編集してニーズに合わせました。

しかし、最後の段落アニメーションが完了した後に何かを警告するにはどうすればよいですか??

以下のリンクから私のコードを確認できます

http://jsbin.com/araget/24/edit

(function ($) {
  // writes the string
  //
  // @param jQuery $target
  // @param String str
  // @param Numeric cursor
  // @param Numeric delay
  // @param Function cb
  // @return void
  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();
    }
  }

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

    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: [
    'Hi I am ShoBingg!',
    'A Mobile loyalty system that works on your smart phone.',
    'My job is to collect Binggz and redeem it for you so you get awarded!',
    'So what are Binggz?',
    'Binggz are the points you get from your favorite local merchants whenever you shop, dine or even visit!',
    'So you do not have to carry any more cards, I am with you all the time and work with home deliveries and wherever you go.',
    'Happy Rewarding!'
  ]
});

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

1 に答える 1

0

テレタイプがループしようとしている場合のコールバックである別のオプションをプラグインに追加できます。たとえば、オプションが呼び出された場合loopCallback、この例ではcallWhenFinishedアラートを含む関数を渡します。

(function ($) {
  // writes the string
  //
  // @param jQuery $target
  // @param String str
  // @param Numeric cursor
  // @param Numeric delay
  // @param Function cb
  // @return void
  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();
    }
  }

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

    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);
      var numOfMessages = settings.text.length;

      return $(this).each(function () {
        (function loop($tar, idx) {
          // type
          typeString($tar, settings.text[idx], 0, settings.delay, function () {
            // delete
            if ((idx+1) % numOfMessages === 0)
               settings.loopCallback();    
            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: [],
        loopCallback: callWhenFinished
      }
    }
  });
}(jQuery));

$('#target').teletype({
  text: [
    '<a href="a">Hi I am ShoBingg!</a>',
    'Happy Rewarding!'
  ]
});

function callWhenFinished() {
        alert("Finished. Looping...");
}
于 2013-02-13T17:21:39.207 に答える