Самба селектора jQuery

Question

Это мой первый пост на 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>

это работает именно так, как я этого ожидаю.Однако, когда я дублирую div «флиппер», анимация сначала запускается в первом наборе, затем запускается во втором наборе и т. д.

Я знаю, что это как-то связано с тем, как я выбираю каждое изображение для анимации, но я действительно не знаю, как еще сделать то, что я делаю.

Конечная цель состоит в том, чтобы иметь возможность объединять элементы div и изображения, размеченные соответствующими классами, и иметь динамический идентификатор для каждого из них, чтобы запускать анимацию, а также чтобы все они могли запускать анимацию одновременно, даже если у них есть отдельные вызовы для каждого элемента div (что может в конечном итоге произойти, чтобы они не переворачивались одновременно).

Спасибо!

Answer 1

Это также мой первый раз на 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 позвони как раньше.

Я надеюсь, что это сработает для вас.

Я прошу прощения за любые орфографические и грамматические ошибки, которые вы можете найти в том, что я только что написал.Я не носитель английского языка.

Answer 2

Сигнатура функции animate():

animate(params, options)

Один из вариантов - queue, который сообщит анимации, следует ли ее добавить в очередь анимации (true) или выполнить немедленно (false).Например:

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

Этот код заставит анимацию выполняться асинхронно.

Видеть http://docs.jquery.com/Effects/animate#paramsoptions для получения дополнительной информации.