使用动画一次滑动超过1 img

Question

我想为合作伙伴徽标创建滑块。我有一个移动一个元素的脚本。 如何收集所有图像并一次性移动所有图像？

脚本：

$(document).ready(function(){
   var w = $("#partners").width();
   $(".img").css({left: w-50});
   var f = function(){
      $(".img").animate({left: 0},5000,function(){
         $(".img").css({left: w-50});
         f();
      });
   };
   f();
});

我的img正在移动到文档的末尾，f（）再次调用（类似于循环）。 我需要使用多个图像。

Answer 1

的 jsFiddle Demo 的

您正在使用的代码设置为在类上工作。因此，只需使用该类标记其他元素即可为多个元素设置动画。这是一个简单的例子（更新为步骤动画）：

html

<div id="partners" style="width:50px;"></div>
<div class="img">Me</div>
<div class="img">Mini Me</div>
<div class="img">Mini Me Me</div>
<div class="img">Mini Me Me Me</div>

CSS

.img{
    position:relative;
}

js - 为了执行动画，跟踪索引并按长度修改它以确保它包裹（在这种情况下为i）

var w = $("#partners").width();
$(".img").css({left: w-50});
var f = function(i){
  i = i % $(".img").length;
  $(".img").eq(i).animate({left: 0},750,function(){
     $(".img").eq(i).css({left: w-50});
     f(i+1);
  });
};
f(0);

Answer 2

你可以将它们全部放入div并移动它吗？例如

<div id="imagesmoving"> <img></img>  <img></img> <img></img> <img></img> <img></img></div>