在sequience中運行Js代碼

我有這個JS代碼，我正在使用從Lazy Line Painter，我試圖讓它運行在一個序列中。我嘗試了不同的方法，但沒有一個能夠工作。有人可以告訴我可以按順序運行此代碼嗎？在sequience中運行Js代碼

代碼：

$(document).ready(function(){ 
$('#SEO_seo').lazylinepainter( 
{ 
    "svgData": pathObj8, 
    "strokeWidth": 2, 
    "strokeColor": "black" 
}).lazylinepainter('paint'); 

$('#SEO_internet').lazylinepainter( 
{ 
    "svgData": pathObj6, 
    "strokeWidth": 2, 
    "strokeColor": "#2b357a" 
}).lazylinepainter('paint'); 

$('#SEO_optmization').lazylinepainter( 
{ 
    "svgData": pathObj5, 
    "strokeWidth": 2, 
    "strokeColor": "#3999b2" 
}).lazylinepainter('paint'); 

}); 

$(document).ready(function(){ 
$('#SEO_marketing').lazylinepainter( 
{ 
    "svgData": pathObj3, 
    "strokeWidth": 2, 
    "strokeColor": "#35a245" 
}).lazylinepainter('paint'); 
}); 
$(document).ready(function(){ 
$('#SEO_html').lazylinepainter( 
{ 
    "svgData": pathObj4, 
    "strokeWidth": 2, 
    "strokeColor": "#075e33" 
}).lazylinepainter('paint'); 
}); 
$(document).ready(function(){ 
$('#SEO_web').lazylinepainter( 
{ 
    "svgData": pathObj1, 
    "strokeWidth": 2, 
    "strokeColor": "#b51d2a" 
}).lazylinepainter('paint'); 
}); 
$(document).ready(function(){ 
$('#SEO_mobile_blog').lazylinepainter( 
{ 
    "svgData": pathObj2, 
    "strokeWidth": 2, 
    "strokeColor": "#da5125" 
}).lazylinepainter('paint'); 
}); 

$(document).ready(function(){ 
$('#SEO_rank').lazylinepainter( 
{ 
    "svgData": pathObj7, 
    "strokeWidth": 2, 
    "strokeColor": "#8b2477" 
}).lazylinepainter('paint'); 
}); 
    $(document).ready(function(){ 
$('#SEO_design').lazylinepainter( 
{ 
    "svgData": pathObj, 
    "strokeWidth": 2, 
    "strokeColor": "#cf1c53" 
}).lazylinepainter('paint'); 
});

來源

2013-11-22 Darko Petkovski

看起來lazylinepainter允許您在動畫完成時使用回調：https：//github.com/camoconnell/lazy-line-painter。所以，只需添加''onComplete'：nextAnimation'即可一個接一個地運行它們 – TheBronx

@TheBronx我該如何使用回調？你能舉個例子，我可以接受你的答案嗎？ –

使用延遲線畫家的回調功能，像這樣：

 
$(document).ready(function(){ 

    /* Define all the callbacks */ 

    var function8 = function(){ 
     $('#SEO_design').lazylinepainter( 
     { 
      "svgData": pathObj, 
      "strokeWidth": 2, 
      "strokeColor": "#cf1c53" 
     }).lazylinepainter('paint'); 
    }; 

    var function7 = function(){ 
     $('#SEO_rank').lazylinepainter( 
     { 
      "svgData": pathObj7, 
      "strokeWidth": 2, 
      "strokeColor": "#8b2477", 
      "onComplete" : function8 //Using the callback 
     }).lazylinepainter('paint'); 
    }; 


    var function6 = function(){ 
     $('#SEO_mobile_blog').lazylinepainter( 
     { 
      "svgData": pathObj2, 
      "strokeWidth": 2, 
      "strokeColor": "#da5125", 
      "onComplete" : function7 //Using the callback 
     }).lazylinepainter('paint'); 
    }; 

    var function5 = function(){ 
     $('#SEO_web').lazylinepainter({ 
      "svgData": pathObj1, 
      "strokeWidth": 2, 
      "strokeColor": "#b51d2a", 
      "onComplete" : function6 //Using the callback 
     }).lazylinepainter('paint'); 
    }; 

    var function4 = function() { 
     +$('#SEO_html').lazylinepainter({ 
      "svgData": pathObj4, 
      "strokeWidth": 2, 
      "strokeColor": "#075e33", 
      "onComplete" : function5 //Using the callback 
     }).lazylinepainter('paint'); 
    }; 

    var function3 = function() { 
     $('#SEO_marketing').lazylinepainter({ 
      "svgData": pathObj3, 
      "strokeWidth": 2, 
      "strokeColor": "#35a245", 
      "onComplete" : function4 //Using the callback 
     }).lazylinepainter('paint'); 
    }; 

    var function2 = function() { 
     $('#SEO_optmization').lazylinepainter({ 
      "svgData": pathObj5, 
      "strokeWidth": 2, 
      "strokeColor": "#3999b2", 
      "onComplete" : function3 //Using the callback 
     }).lazylinepainter('paint'); 
    }; 

    var function1 = function() { 
     $('#SEO_internet').lazylinepainter({ 
      "svgData": pathObj6, 
      "strokeWidth": 2, 
      "strokeColor": "#2b357a", 
      "onComplete" : function2 //Using the callback 
     }).lazylinepainter('paint'); 
    }; 

    $('#SEO_seo').lazylinepainter({ 
     "svgData": pathObj8, 
     "strokeWidth": 2, 
     "strokeColor": "black", 
     "onComplete" : function1 //Using the callback 
    }).lazylinepainter('paint'); 

});

希望它能幫助！

來源

2013-11-22 10:28:29 Talysson

非常感謝，像魅力一樣工作！ –

在sequience中運行Js代碼

回答

相關問題