jQuery选择器samba

这是我在stackoverflow上的第一篇帖子，大家好

我对jQuery动画的第一次尝试是将一组图像分成两个部分，上半部分和下半部分，并使它们通过一个向下翻转的过渡来旋转，a-a是带有向下翻转数字的古代闹钟

我已经下载了动画，但问题是页面上同时有多个动画。我的问题来自于不理解jQuery选择器的范围

 $(document).ready(function(){
  flippers($('.flipper'));
 });

 function flippers(divs){
  divs.each(function(i){
   $(".top_container img").each(function (j){
    $(this).attr("id",i+"t"+j);
   });
   $(".bottom_container img").each( function(j){
    $(this).attr("id",i+"b"+j);
   });
  });
  var flip_wait = 3600;
  setTimeout("flippers_start("+flip_wait+")",flip_wait);
 }

 function flippers_start(time,flipper){
  var curr_top = '#' + $('.top_container img:visible').attr('id');
  var curr_bottom = '#' + $('.bottom_container img:visible').attr('id');
  if( ($('.top_container img').size() - 1) <= curr_top[3] ){
   var next_top = curr_top.substring(0,3) + 0;
   var next_bottom = curr_bottom.substring(0,3) + 0;
  }
  else{
   var next_top = curr_top.substring(0,3) + (parseInt(curr_top[3]) + 1);
   var next_bottom = curr_bottom.substring(0,3) + (parseInt(curr_bottom[3]) + 1);
  }

  var height = $(curr_top).height();
  var width = $(curr_top).width();

  flip(height,width,curr_top,curr_bottom,next_top,next_bottom);
  setTimeout("flippers_start("+time+")",time);
 }

    function flip(height,width,fromtop,frombottom,totop,tobottom){
  var fliptime = 250;

  $(frombottom).css("z-index","1");
  $(tobottom).css("z-index","2");
  $(fromtop).css("z-index","2");
  $(totop).css("z-index","1");

  $(tobottom).css("height","1px").show();
  $(totop).show();
  $(fromtop).stop().animate({height:'0px',width:''+width+'px',marginTop:''+height+'px'},{duration:fliptime});
  window.setTimeout(function() {
  $(tobottom).stop().animate({height:''+height+'px',width:''+width+'px',marginBottom:'0px',opacity:'1'},{duration:fliptime});
  },fliptime-40);
  $(frombottom).slideUp();
  window.setTimeout(function(){
   $(fromtop).height(height).hide().css("margin-top","0px");
  },fliptime*2);

}

在我描述的一组图像上运行时

<div class="flipper">
<div class="top_container">
 <img src="images/pink_floyd_img/dark1.jpg" class="top first" />
 <img src="images/pink_floyd_img/wall1.jpg" class="top second hidden" />
 <img src="images/pink_floyd_img/wish1.jpg" class="top third hidden" />
</div>
<div class="bottom_container">
 <img src="images/pink_floyd_img/dark2.jpg" class="bottom first" />
 <img src="images/pink_floyd_img/wall2.jpg" class="bottom second hidden" />
 <img src="images/pink_floyd_img/wish2.jpg" class="bottom third hidden" />
</div>
</div>

这正是我所期望的。但是，当我复制flipper div时，动画首先在第一组上运行，然后在第二组上运行，以此类推

我知道这与我选择每个图像进行动画制作的方式有关，但我真的不知道如何做我正在做的事情

最终的目标是能够将用适当的类标记的div和图像放在一起，并对每个集进行动态标识，以便运行动画，并且使它们都能够同时启动动画，即使它们对每个div都有单独的调用，而这些调用可能最终会发生，以便它们不会同时翻转

---

谢谢

这也是我第一次讨论StackOverflow。我希望我能帮忙

我认为你需要做的是分别为页面上的每个页面调用flippers\u start。您可以使用该函数中已有的flipper arg。应该是这样的：

function flippers(divs){
    var flip_wait = 3600;
    divs.each(function(i){
        var flipper = $(this);
        flipper.find(".top_container img").each(function (j){
            $(this).attr("id",i+"t"+j);
        });
        flipper.find(".bottom_container img").each( function(j){
            $(this).attr("id",i+"b"+j);
        });
        setTimeout(function(){
            flippers_start(flip_wait, flipper);
        },flip_wait);
    });
}

我更改了setTimeout调用，并将其放入第一个调用中，以便对每个$'.flipper'执行它。还请注意，我使用flipper.find.top_container img而不是$.top_container img仅选择当前flipper中的图像，并且我将flipper作为第二个参数传递给flippers_start

在上面的函数中，我一直使用flipper仅选择当前flipper div中的图像，并像以前一样更改了setTimeout调用

我希望这对你有用

---

我为你在我刚才写的东西中发现的任何拼写或语法错误道歉。我不是以英语为母语的人。

动画功能签名是：

animate(params, options)

其中一个选项是queue，它将告诉动画是应该将其添加到动画队列true还是立即执行false。例如：

$('#myelement').animate({ left: "50px", opacity: 1 }, { duration: 500, queue: false });

该代码将告诉动画以异步方式执行

---

有关更多信息，请参阅。

我不知道，但是+1希望您的问题能够明确且实际提供足够的信息，并且不拖拉plz，请给我发送密码。据我所知，一次只能在页面上显示一个项目，当当前动画停止时，其他一切都将自动排队并运行。我非常确定这不需要CW。这正是我认为我需要前进的方向。非常感谢你的帮助！PS你的英语比许多以英语为母语的人都好@马特·鲍尔，你说得对。我点击了复选框，却不知道CW是什么意思。下次我会小心的。

$('#myelement').animate({ left: "50px", opacity: 1 }, { duration: 500, queue: false });