1

私はjqueryタイプの書き込み効果を実行しており、テキストのタイプ書き込みjqueryアニメーションが機能した後に関数を実行します

最後のメッセージが印刷されたことを検出して、たとえば何かに警告するような機能を実行する方法

これが私のコードです http://jsfiddle.net/dnkwp/28/

var where, when, iteration; //added
iteration = 0;
bigDelay = 0;
$.fn.teletype = function (opts) {
    iteration++;
    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
    if (iteration > 1) {
        bigDelay = bigDelay + settings.text.length * settings.animDelay;
        setTimeout(function () {
            $.each(settings.text, function (i, letter) {
                setTimeout(function () {
                    $this.html($this.html() + letter);
                }, settings.animDelay * i);
            });
        }, bigDelay);
    } else {
        $.each(settings.text, function (i, letter) {
            setTimeout(function () {
                $this.html($this.html() + letter);
            }, settings.animDelay * i);
            //alert($('#container4').html().length);
        });
    }
};
$(function () {
    $('#container1').teletype({
        animDelay: 100,
        text: 'This is message 1'
    });
    $('#container2').teletype({
        animDelay: 100,
        text: 'this is message 2'
    });
    $('#container3').teletype({
        animDelay: 100,
        text: 'this is message 3'
    });
    $('#container4').teletype({
        animDelay: 100,
        text: 'this is message 4'
    });
});
if ($('#container4').html().length == 17) {
    alert("test")
} //this not work with me
4

2 に答える 2

1

設定ハッシュを次のようにする1つ以上のコールバックオプションを追加します。

{
  animDelay: 100,
  text: 'this is message 4',
  after: function (text) {
     alert($(this).attr('id') + ' teletype completed: ' + text);
  },
  afterChar: function(ltr, ltrIndex, text) {
     console.log('typed "'+ ltr + '" - character '+ ltrIndex + '/' + text.length + ' in "' + text +'"');
  }
}

したがって、コールバックを実装するには、次のようにします。

$.fn.teletype = function (opts) {
    iteration++;
    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

    if (iteration > 1) {
        bigDelay = bigDelay + settings.text.length * settings.animDelay;
        setTimeout(function () {
            $.each(settings.text, function (i, letter) {
                setTimeout(function () {
                    $this.html($this.html() + letter);

                    // if we have a settings.afterChar function execute it,
                    // binding 'this' to the container element and sending along
                    // pertinent arguments
                    if(typeof settings.afterChar == 'function') {
                       settings.afterChar.apply($this, [letter, i, settings.text]);
                    }

                    // if this is the last character and we have  settings.after function
                    // then execute it, binding it to the container element and sending along
                    // pertinent arguments
                    if(i+1 === settings.text.length && typeof settings.after == 'function') {
                       settings.after.apply($this, [settings.text]);
                    }
                }, settings.animDelay * i);
            });
        }, bigDelay);
    } else {
        $.each(settings.text, function (i, letter) {
            setTimeout(function () {
                $this.html($this.html() + letter);

                    // if we have a settings.afterChar function execute it,
                    // binding 'this' to the container element and sending along
                    // pertinent arguments
                if(typeof settings.afterChar == 'function') {
                   settings.afterChar.apply($this, [letter, i, settings.text]);
                }

                 // if this is the last character and we have  settings.after function
                 // then execute it, binding it to the container element and sending along
                 // pertinent arguments
                if(i+1 === settings.text.length && typeof settings.after == 'function') {
                   settings.after.apply($this, [settings.text]);
                }
            }, settings.animDelay * i);
        });
    }
};

変更されたフィドル：http：//jsfiddle.net/gjCLh/

于 2013-02-13T20:30:40.883 に答える
0

引数としてコールバックを渡し、テキストの長さに達しているかどうかをテストします

http://jsfiddle.net/dnkwp/34/

$('#container3').teletype({
    animDelay: 100,
    text: 'this is message 3'
});
$('#container4').teletype({
    animDelay: 100,
    text: 'this is message 4',
    callback : function () {
        alert('coucou')
    }
});

//Your plugin
....
    $.each(settings.text, function (i, letter) {
        setTimeout(function () {
            $this.html($this.html() + letter);
            if ((settings.callback != null)&&(i == settings.text.length-1))
                settings.callback();
        }, settings.animDelay * i);
    });
....
于 2013-02-13T20:45:42.273 に答える