Search code examples
javascriptjqueryjquery-events

Trigger function when done airport plugin text effect


I'm using a plugin which rotates letters similar to airport notice boards.

Here is the script written by http://unwrongest.com/projects/airport/

I would like to know how to trigger a function once the rotation of the letter has ended so that I can change the CSS background property of my background div before the next array starts rotating.

Something like so: background1 -> rotate "7 days" -> done rotation -> background2 -> rotate "14 days" -> done rotation -> background3 -> rotate "22 days" etc...

HTML

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

JS Script

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

Solution

  • The following conditional

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

    is where the plugin prepares the next spin after completing one - so you could apply a class/call a function there.

    Add brackets and include the logic to apply a class, like this:

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

    Here's a codepen example: http://codepen.io/anon/pen/gbqqKX