jQuery-Selektor samba

Question

Dies ist mein erster Beitrag auf Stackoverflow, hallo alle!

Mein erster Ausflug in jQuery Animation ist eine Reihe von Bildern in zwei divs zu haben, der oberen Hälfte und der unteren Hälfte, und machen sie mit einem Flip-Down-Übergang a-la die alten Wecker mit Flip-Down drehen durch Zahlen.

Ich habe die Animation nach unten bekam, aber das Problem ist, mit mehr als einer von ihnen auf der Seite Animieren gleichzeitig. Mein Problem kommt von dem Umfang von jQuery Selektoren zu verstehen.

 $(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);

}

, wenn diese auf einer Reihe von Bildern ausführen, die ich beschrieben,

<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>

es funktioniert genau so, wie ich es erwartet. Allerdings, wenn ich den „Flipper“ div duplizieren, die Animation auf dem ersten Satz läuft zuerst, dann läuft auf dem zweiten Satz, etc.

Ich weiß, es hat etwas mit der Art und Weise zu tun, ich bin jedes Bild Auswahl zu animieren, wie es geschieht, aber ich weiß wirklich nicht, wie sonst zu tun, was ich tue.

Das ultimative Ziel ist es, zusammen zu stellen divs und Bilder mit den richtigen Klassen markiert und haben jeweils dynamisch um id'd Satz um die Animation zu laufen - und auch für sie alles Animation gleichzeitig starten - auch wenn sie für jedes div getrennte Anrufe haben (was passiert am Ende vielleicht so, dass sie zur gleichen Zeit nicht alle Flip tun).

Danke!

Answer 1

Das ist auch mein erstes Mal auf Stackoverflow. Ich hoffe, dass ich helfen kann.

Was ich glaube, Sie tun müssen, um Anruf flippers_start() separat für jede Flosse auf Ihrer Seite. Sie können die flipper verwenden arg Sie bereits in dieser Funktion haben. Es sollte wie folgt sein:

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);
    });
}

änderte ich den setTimeout Anruf und lege es in dem ersten each(), so dass es für jeden $('.flipper') ausgeführt wird. Beachten Sie auch, dass ich mit flipper.find(".top_container img") statt $(".top_container img") nur die Bilder innerhalb des aktuellen Flippers wählen und dass ich die flipper als zweites Argument übergeben 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);
}

In der obigen Funktion, die ich mit flipper halte nur die Bilder innerhalb des aktuellen Flippers div auszuwählen und änderte den setTimeout Anruf wie zuvor.

Ich hoffe, das für Sie arbeitet.

ich entschuldigen uns für die Rechtschreib- oder Grammatikfehler Sie was finden kann ich gerade geschrieben habe. Ich bin kein englischer Muttersprachler.

Answer 2

Die belebte () Funktion Unterschrift lautet:

animate(params, options)

Eine der Optionen ist queue, die die Animation wird zeigen, ob es um die Animation Warteschlange (true) oder sofort ausführen (false) hinzugefügt werden soll. Zum Beispiel:

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

Dieser Code wird die Animationen sagen asynchron auszuführen.

Siehe http://docs.jquery.com/Effects/animate#paramsoptions für weitere Informationen.