1

jQueryを使用して画像のキューをアニメーション化しようとしました。何らかの理由で、jquery 関数を無視しています。画像は、JSON データを介してドキュメントに動的に読み込まれます。これまでのところ、画像をロードして、次の画像ロードとして各 div をプッシュできましたが、スムーズではありません。コンテナ div は #stream を呼び出します。各画像は、div クラス呼び出しステータスの下にあります。

ロードされた後、すべての画像を左270pxに移動しようとしています(ループ)。

画像のテンプレ

 queue.next(function(status, step) {
 var div = document.createElement('div');

 // create DOM element
 var div = document.createElement('div');
 div.className = 'status';
 var photo = status.images.standard_resolution.url; 
 div.innerHTML = '<img src="'+photo+'"/>';

 // add div to the top of the stream element (each new status is newer)
 document.getElementById('stream').insertBefore(div,     document.getElementById('stream').firstChild);

setTimeout(step, 1000);

});

使用しようとしているjQuery

  $(window).ready(function(){
    animateTheBox();
   }); 

 function animateTheBox() {
    $(".status").animate({"left": "+=270px"},"slow");
  }

どんな援助も大歓迎です！

4

1 に答える 1

0

ここでは、doument ready イベントでアニメーション関数を呼び出しています

  $(window).ready(function(){
    animateTheBox();
   });

animateTheBox();画像を読み込んだ後に関数を呼び出す必要があります。

つまり、呼び出しstepで言及された関数でsetTimeout(step, 1000);

于 2012-12-31T19:58:03.650 に答える