jQuery image replacement animation (mimic animated gif) -


i have sequence of jpgs in form of:

logo_1001.jpg logo_1002.jpg logo_1003.jpg logo_1004.jpg logo_1005.jpg ... way logo_1208.jpg 

i trying change source of images every second (roughly) mimic animated gif, using these jpgs. animation starts when click on image.

here im working far, although im sure coded better.

also, isnt working right ;x

function startanimation() {     var name = $('#logo').attr('src');     var index = name.indexof(".jpg");      var int = name.slice(index-4,index);      while(int<1208){         int++;          var newname=name.slice(0,index-4);         newname=newname+int;         name=newname+".jpg";          $('#logo').attr('src',name).delay(500);     } }  $("#logo").click(function() {     startanimation() }); 

thoughts? aid?

thanks

just got working using settimeout.

$("#logo").click(function() {     var $logo = $(this), src = $logo.attr("src");     var index = src.indexof('.jpg');     var step = +src.slice(index-4, index);      function frame() {         step++;         if(step < 1050) {             var newsrc = src.slice(0, index-4) + step + ".jpg";             console.log(newsrc);             $logo.attr('src', newsrc);             settimeout(frame, 1000);         }     }      frame(); }); 

http://jsfiddle.net/dgz4m/

the problem script in use of .delay. it's useful when chaining jquery ui animations, not arbitrary delays. jquery documentation says that

the .delay() method best delaying between queued jquery effects. because limited—it doesn't, example, offer way cancel delay—.delay() not replacement javascript's native settimeout function, may more appropriate use cases.


Comments

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -