jQuery selector samba

Question

Ceci est mon premier post sur stackoverflow, bonjour tout le monde! Ma première expérience dans l'animation jQuery est d'avoir un ensemble d'images en deux divs, moitié supérieure et moitié inférieure, et les faire tourner à travers une transition rabattable a-la les réveils anciens avec flip- numéros en baisse.

J'ai l'animation vers le bas, mais le problème est d'avoir plus d'un de ces animation sur la page en même temps. Mon problème vient de ne pas comprendre la portée des sélecteurs 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); 

} 

lorsque cela est exécuté sur un ensemble d'images que je l'ai décrit,

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

cela fonctionne exactement comme je m'y attendais pas. Cependant, quand je duplique la div "flipper", l'animation tourne d'abord sur le premier ensemble, puis sur le second, etc.

Je sais que cela a quelque chose à voir avec la façon dont je sélectionne chaque image pour l'animer en l'occurrence, mais je ne sais pas vraiment comment faire ce que je fais d'autre.

Le but ultime est de pouvoir assembler des divs et des images marquées avec les classes appropriées et de les définir dynamiquement afin de lancer l'animation - et aussi de lancer l'animation simultanément - même s'ils ont des appels séparés pour chaque div (ce qui pourrait finir par se produire de sorte qu'ils ne se retournent pas tous en même temps).

Merci!

Answer 1

C'est aussi ma première fois sur StackOverflow. J'espère que je peux aider.

Ce que je pense que vous devez faire est d'appeler flippers_start() séparément pour chaque flipper sur votre page. Vous pouvez utiliser l'argument flipper que vous avez déjà dans cette fonction. Il devrait être quelque chose comme ceci:

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

j'ai changé l'appel setTimeout et le mettre dans la première each() il est exécuté pour chaque $('.flipper'). Notez également que j'utilise flipper.find(".top_container img") au lieu de $(".top_container img") pour sélectionner seulement les images dans le flipper actuel et que je passe le flipper comme deuxième argument à 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); 
} 

Dans la fonction ci-dessus, je continue à utiliser flipper pour sélectionner uniquement les images dans le Flipper courant div et changé l'appel comme avant setTimeout.

J'espère que cela fonctionne pour vous. Je m'excuse pour toute faute d'orthographe ou de grammaire que vous pourriez trouver dans ce que je viens d'écrire. Je ne suis pas un locuteur natif anglais.

Answer 2

Animate signature de la fonction() est:

animate(params, options) 

L'une des options est queue, qui racontera l'animation si elle doit être ajouté à la file d'attente d'animation (true) ou exécuter immédiatement (false).Par exemple:

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

Ce code indique aux animations de s'exécuter de manière asynchrone. Pour plus d'informations, voir http://docs.jquery.com/Effects/animate#paramsoptions.