Schreibmaschine-Effekt mit jQuery

Edit: ich habe nicht wirklich alle Fragen, die ich hätte Fragen sollen in meiner ursprünglichen Frage. Um diese einfacher für Menschen auf der Suche nach einer ähnlichen Antwort, dies ist, was die Frage war:

Wie mache ich einen Schreibmaschinen-Effekt mit einem blinkenden cursor, die Pausen am Ende der Anweisung löscht die Anweisung, und schreibt ein neues?

Check-out Yoshi ' s Antwort weiter unten. Es macht genau das...

InformationsquelleAutor blahblahAMYblah | 2012-11-10

jquery

demo: http://jsbin.com/araget/5/

plugin:

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

html:

<span id="target"></span>
<span id="cursor"></span> <!-- used for the blinking cursor effect -->

init:

$('#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',
    'accusam et justo duo dolores et ea rebum. Stet clita kasd',
    'gubergren, no sea takimata sanctus est Lorem ipsum dolor sit',
    'amet. 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 accusam',
    'et justo duo dolores et ea rebum. Stet clita kasd gubergren,',
    'no sea takimata sanctus est Lorem ipsum dolor sit amet.'
  ]
});

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

Das ist alle Arten von cool... 🙂
Yoshi...you rock! Das ist genau, was ich tun wollte.
Eine weitere Sache, obwohl, Sie wissen, wie Sie auf die Bearbeiten die ich gepostet, dass Fiddle jsfiddle.net/blahblahAMYblah/aDzUM, wo das zweite Beispiel zeigt den Unterstrich, als es Arten. Wäre das einfach zu implementieren in Ihrem code zu?
Auch, welchen Wert muss ich ändern, um es pause länger, bevor es sich löscht? Ich will es bleiben für jede Nachricht, für mindestens ein paar Sekunden. Jede Zahl die ich geändert habe war, die Briefe geben oder reverse-schneller...dadurch nicht eine pause, so dass ich denke, dass ist nicht für eine Verzögerung noch nicht. Es ist wahrscheinlich, läuft gerade die Funktion löschen, sobald es fertig ist, richtig? Ich bin immer noch versuchen zu lernen, jQuery, also sorry, wenn diese Frage dumm ist.
Kann ich HTML in der variable? Beispiel einer <a href

InformationsquelleAutor Yoshi

Hinzugefügt, eine einfache Funktion zu Ende, und ein paar Variablen in zwischen...

Geige

var where, when; //added

$.fn.teletype = function(opts){
    var $this = this,
        defaults = {
            animDelay: 50
        },
        settings = $.extend(defaults, opts);

    var letters = settings.text.length; //added

    where = '#' + $($this).attr('id'); //added
    when = settings.animDelay; //added

    $.each(settings.text, function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + letter);

            if( $($this).html().length == letters ){ reverse(); } //Added to trigger reversing function

        }, settings.animDelay * i);
    });
};

$(function(){
    $('#container').teletype({
        animDelay: 100,
        text: 'Now is the time for all good men to come to the aid of their country...'
    });
});


//Added Reversing Function

    function reverse(){

        if ($(where).html().length > 0){          
            x = $(where).html().length - 1;
            y = $(where).html().substr(0, x);
            $(where).html(y);
            setTimeout(reverse , when);
        }else{
            console.log('Reverse Complete');
            clearTimeout(reverse);
        }
    }

Das umgekehrte funktioniert Super! Ich denke, dass Yoshi bekam die volle Vorstellung von dem, was ich für ging zwar nicht, aber Sie auf jeden Fall gab großen Eingang zu. Danke!
Kann ich HTML in der variable?
Nicht, wie es derzeit steht, wird es nur für die Ausgabe der html-Code als text. Sie herumbasteln können, wenn Sie möchten. Sie konnte immer Stil der Haupt-Behälter, wenn nötig.

InformationsquelleAutor VIDesignz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.