如何運行的功能後，我的jQuery的動畫完成它的工作

Question

我做一個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 

Answer 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/

Answer 2

我想傳遞一個回調作爲參數和測試，如果文本長度已經達到

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