Simple jQuery airport text effect, need to stop, clear change on fly?
I love to use this simple code here
http://www.unwrongest.com/projects/airport/
and it will be use on my web for weather display http://www.xaluan.com
the idea is: the temperature will jump from 00 to current temp , it look nice and live.. The issue is, when i change the temp from C to F, or change location of Temp, the temp will need to change then the text effect need to be change on fly too..
but i have try many time even use .stop or .clearQue to restart effect but not success. it messing up, some case dont run, some case the array of effect is become of combine two array.. i totaly lost, thank for any adivices
this is narrow simple code for statup test:
<span id="tempnow" class="tempnow">30</span>
<span onclick="changeC()">°F</span>
<span onclick="changeF()">°C</span>
<script>
// fist time run will be:
$(function($){
$('#tempnow').airport(['00','34']);
});
function changeF () {
$('#tempnow').airport([ '00', '91' ]);
}
function changeC () {
$('#tempnow').airport([ '00', '34' ]);
}
(function($){
$.fn.extend({
airport: function(array) {
var self = $(this);
var chars = ['0','9','8','7','6','5','4','3','2','1','-'];
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); }, 1000);
else if(d >= longest)
setTimeout(function() { testChar(0,0,c+1,0); }, 1000);
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).toLowerCase())
testChar(a,b+1,c,d);
else
testChar(a+1,0,c,d+1);
}, 20);
}
}
testChar(0,0,0,0);
}
});
})开发者_JAVA技巧(jQuery);
</script>
I put the jsbin here hope some one can help me by code
http://jsbin.com/onaqis/7/edit#source
thanks..
Here's a hackish workaround: http://jsfiddle.net/EUKuS/ You need to take the following line out to break the endless cycle:
if(c >= array.length)
setTimeout(function() { testChar(0,0,0,0); }, 1000); // <----- COMMENT OUT!
else if(d >= longest)
Should work but fixing the plugin would be better.
精彩评论