开发者

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]==" ")?"&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).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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜