jpgsでjavascript（mimic gif）を使用してアニメーションを作成する必要があります

Question

古いフラッシュアニメーションのjpegがたくさんあります。 彼らは1000.jpgから1092.jpgの順番で演奏されています。 私はこれらの写真で.gifアニメーションを作成しようとしましたが、gifは単純に大きく、品質は恐ろしいものでした。

これは、jQueryを使用してこれらのjpegをアニメーション化して、このgifアニメーションを模倣しようとした理由です。

これは私がstackoverflowの

$("#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 < 93) { 
     var newSrc = src.slice(0, index-4) + step + ".jpg"; 
     console.log(newSrc); 
     $logo.attr('src', newSrc); 
     setTimeout(frame, 50); 
    } 
} 

frame(); 
}); 

にここで見つけるコードがある。しかし、それは働いていない...アニメーション時間は0.03秒で、それぞれだったと私は「IMGのID =」ロゴ」srcと絵を持っていました= "images/1000.jpg"/"（確かに<>）が動作していないか、srcを変更しています。

どのような対応ができますか？ ありがとう

編集：これが私を狂わせるようにもう一度お手伝いしてください。 スプライトのことを試しましたが、背景がどのように動かされるのかを見ることができます。

私は本当にそのgifを模倣する必要があります、それは93の写真から構成されている単なるgifです。それは...少なくとも私のブラウザ（Firefoxの4.0.1）で、あなたがそれを望むよう

Answer 1

/* 
You are trying to set the `src` of a `div`. Set the `src` of an `img` instead: 

<div> 
    <img id="logo" src="mypath/mylittlepony.jpg"> 
</div> 
*/ 
this doesn't apply anymore since the question was edited... 

今this JSFiddle作品、別の顔に顔が変わるだけでアニメーションです。

EDIT
負荷後に開始：負荷と無限ループ後this JSFiddle
スタートを見て：this final JSFiddle
余分なギミックを見て：back and forth

をあなたはまだキャッシュに問題を持っています。アニメーションは、すべてのイメージがキャッシュされている場合にのみ流動的です。ページに1-px-imgsとしてプレロードすることができます。もちろん

<img src="http://iflorian.com/test/image/1000.jpg" height="1" width="1" alt="" /> 
<img src="http://iflorian.com/test/image/1001.jpg" height="1" width="1" alt="" /> 
<img src="http://iflorian.com/test/image/1002.jpg" height="1" width="1" alt="" /> 
... 
<img src="http://iflorian.com/test/image/1050.jpg" height="1" width="1" alt="" /> 

あなたはjQueryの経由でこれを行うことができますが、あなたは単にタイマー機能では、元の画像を置き換える画像オブジェクトの配列を保持することができます。

Answer 2

Javascriptでエラーが発生している場合は、Webブラウザのエラーコンソールをチェックしてください.JSのいずれかの部分で例外が発生しても実行できない場合は、エフェクトも失敗する可能性があります。 時折私に起こった。