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]==" ")?" ":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);
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