机场插件文本效果完成后触发功能

Question

我正在使用一个类似于机场布告牌的旋转字母的插件。

这里是http://unwrongest.com/projects/airport/

写的脚本

我想知道如何在字母旋转结束后触发一个函数，以便我可以更改 css 背景属性我的背景 div下一个阵列开始旋转。

类似这样：background1 -> rotate "7 days" -> done rotation -> background2 -> rotate "14 days" -> done rotation - > background3 -> rotate "22 days" 等...

HTML

$('.dur').airport(['7 days','14 days','22 days','31 days','3 weeks','2 months']);

JS 脚本

(function($){ 
     $.fn.extend({  
         airport: function(array) {
            var self = $(this);
            var chars = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g',' ','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','-','1','2','3','4','5','6','7','8','9','0'];
            var longest = 0;
            var items = items2 = array.length;

            function pad(a,b) { return a + new Array(b - a.length + 1).join(' '); }

            $(this).empty();

            while(items--)
                    if(array[items].length > longest) longest = array[items].length;

            while(items2--)
                    array[items2] = pad(array[items2],longest);

            spans = longest;
            while(spans--)
            $(this).prepend("<span class='c" + spans + "'></span>");
            function testChar(a,b,c,d){
                if(c >= array.length)
                        setTimeout(function() { testChar(0,0,0,0); }, 0);               
                else if(d >= longest)
                       setTimeout(function() { testChar(0,0,c+1,0); }, 10000);
                else {
                    $(self).find('.c'+a).html((chars[b]==" ")?"&nbsp;":chars[b]);
                    setTimeout(function() {
                        if(b > chars.length){
                                testChar(a+1,0,c,d+1);
                            }
                        else if(chars[b] != array[c].substring(d,d+1)){
                                testChar(a,b+1,c,d);
                            }
                        else{
                                testChar(a+1,0,c,d+1); 
                        }
                    }, 1);
                }
            }
            testChar(0,0,0,0);
        } 
    }); 
})(jQuery);

Answer 1

以下条件

else if(d >= longest)
    setTimeout(function() { testChar(0,0,c+1,0); }, 10000);

是插件在完成一次旋转后准备下一次旋转的地方 - 因此您可以在那里应用 class/call 函数。

添加括号并包含应用 class 的逻辑，如下所示：

else if(d >= longest) {
    $('.dur').attr('class', 'dur ' + (colors[c]));
        setTimeout(function() { testChar(0,0,c+1,0); }, 1000);
}

这是一个代码笔示例：http://codepen.io/anon/pen/gbqqKX

机场插件文本效果完成后触发功能

trigger function when done airport plugin text effect

javascript

javascript-events