通过jQuery旋转动态图像

时间:2012-12-31 19:48:59

标签: jquery json

我一直试图通过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");
  }

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

您可以在此处为doument ready事件调用您的动画功能

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

加载图片后,您应该调用animateTheBox();函数。

即在step调用

中提到的setTimeout(step, 1000);函数中