jQuery selettore samba

Question

Questo è il mio primo post su StackOverflow, Ciao a tutti!

La mia prima avventura nel jQuery animazione è quello di avere una serie di immagini in due div, metà superiore e inferiore metà, e farli ruotare attraverso con una transizione flip-down a-la antichi sveglie con flip-down numeri.

Ho l'animazione verso il basso, ma il problema è avere più di uno di questi animare sulla pagina contemporaneamente. Il mio problema deriva dal non comprendere la portata della selettori di 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);

}

quando questo viene eseguito su un insieme di immagini che ho descritto,

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

funziona solo il modo mi aspetto. Tuttavia quando ho duplicare il div "flipper", l'animazione viene eseguito sul primo set, poi gira sul secondo set, ecc.

So che ha qualcosa a che fare con il modo in cui sto selezionando ogni immagine per animare come accade, ma io in realtà non so come altro fare quello che sto facendo.

L'obiettivo finale è quello di essere in grado di mettere insieme div e le immagini contrassegnate con le classi corretta e avere ogni impostare dinamicamente ha identificato al fine di eseguire l'animazione - e anche per tutti loro di avviare l'animazione contemporaneamente - anche se hanno chiamate separati per ogni div (che potrebbe finire accadendo in modo che non tutti capovolgere allo stesso tempo).

Grazie!

Answer 1

Questa è anche la mia prima volta su StackOverflow. Spero di poter aiutare.

Quello che penso che dovete fare è chiamare flippers_start() separatamente per ciascun flipper sulla tua pagina. È possibile utilizzare il flipper arg hai già in quella funzione. Dovrebbe essere qualcosa di simile:

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

Ho cambiato la chiamata setTimeout e metterlo dentro il primo each() in modo che sia eseguito per ogni $('.flipper'). Si noti inoltre che sto usando flipper.find(".top_container img") invece di $(".top_container img") per selezionare solo le immagini all'interno del flipper in corso e che mi passa il flipper come secondo argomento al 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);
}

Nella funzione di cui sopra continuo ad usare flipper per selezionare solo le immagini all'interno del div flipper corrente e cambiato la chiamata setTimeout come prima.

Spero che questo funziona per voi.

Mi scuso per eventuali errori di ortografia o grammaticali si possono trovare in quello che ho appena scritto. Io non sono un madrelingua inglese.

Answer 2

La firma della funzione animate () è il seguente:

animate(params, options)

Una delle opzioni è queue, che dirà l'animazione se debba essere aggiunto alla coda di animazione (true) o eseguire immediatamente (false). Ad esempio:

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

Che il codice dirà le animazioni per eseguire in modo asincrono.

http://docs.jquery.com/Effects/animate#paramsoptions per maggiori informazioni.