1

这是我在stackoverflow上的第一篇文章，大家好！

我对 jQuery 动画的第一次尝试是在两个 div 中设置一组图像，上半部分和下半部分，并通过向下翻转的过渡使它们旋转，就像古老的带有向下翻转数字的闹钟一样。

我已经把动画弄下来了，但问题是页面上同时有不止一个动画。我的问题来自于不了解 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 和图像放在一起，并让每个集合动态 id 以运行动画 - 并且让它们都同时启动动画 - 即使它们有每个 div 的单独调用（这可能最终会发生，因此它们不会同时翻转）。

谢谢！

4

2 回答 2

0

这也是我第一次使用 StackOverflow。我希望我能帮上忙。

我认为您需要做的是flippers_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调用并将其放在第一个调用中，each()以便为每个调用执行$('.flipper')。另请注意，我使用flipper.find(".top_container img")而不是$(".top_container img")仅选择当前脚蹼中的图像，并且我将.flipper作为第二个参数传递给flippers_start().

function flippers_start(time,flipper){
    var curr_top = '#' + flipper.find('.top_container img:visible').attr('id');
    var curr_bottom = '#' + flipper.find('.bottom_container img:visible').attr('id');
    if( (flipper.find('.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(function(){
        flippers_start(time, flipper);
    },time);
}

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

我希望这对你有用。

对于您在我刚刚写的内容中可能发现的任何拼写或语法错误，我深表歉意。我不是以英语为母语的人。

于 2009-11-03T04:10:12.100 回答
0

animate() 函数签名是：

animate(params, options)

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

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

该代码将告诉动画异步执行。

有关详细信息，请参阅http://docs.jquery.com/Effects/animate#paramsoptions。

于 2009-11-03T04:12:10.283 回答