Déclenchement de l'événement jQuery lorsque 3 éléments spécifiques sont visibles

Question

En espérant que cela soit logique.

Je teste une nouvelle version de mon site personnel à http://joshuacody.net/jc3/

Je cherche à afficher mes œuvres dans un peu d'un style interactif, en utilisant jQuery.

Vous pouvez voir que chaque image est mal mise en correspondance, mais elle a un rotateur. Et vous pouvez faire pivoter chaque image pour aligner les trois. Quand tous les trois sont alignés, je voudrais fondre dans un div expliquant ce qu'est ce projet.

J'utilise le plugin pour faire pivoter mes images (http://www.malsup.com/jquery/cycle/), si cela peut vous aider. Je suis assez nouveau à jQuery, et je suis juste un cheveu coincé sur la façon de le faire théoriquement. Des idées?

Answer 1

Je suis allé sur votre site avant de lire votre question et autant j'aime jouer avec la fonction de spin pour aligner des images, comme une interface pour aller quelque part, ce n'est pas évident sans lire votre explication.

Vous devez utiliser des événements ou des rappels comme described dans la démo. Le paramètre after: est tout ce dont vous avez vraiment besoin. Je voudrais d'abord remplir vos attributs alt avec des descriptions qui sont identiques pour toutes les images de fente qui correspondent. Ensuite, la fonction après ressemblerait à quelque chose comme:

$('#slot_1').cycle({ 
    fx: 'scrollVert', 
    next: '.scroll_up_1', 
    prev: '.scroll_down_1', 
    after: onAfter, 
    timeout: 0 
}); // Duplicate the after param on all 3 slots. 
function onAfter(){ 
    var alt = $('#slot_1 img:visible').attr('alt'); 
    if (alt == $('#slot_2 img:visible').attr('alt') && 
     alt == $('#slot_3 img:visible').attr('alt')) { 
     switch (alt) { 
     case 'Critical Reason?': 
      $('#linkToWork1').click(); //a hidden link? 
     break; 
     case 'CFCC Labs': 
      document.location = 'http://url/to/work/2'; 
     break; 
     case 'Tailgate': 
      $('#formActionWork3').submit(); 
     break; 
     default: 
     //oops. 
     } 
    } 
} 

Notez que je mets en trois façons de changer réellement la page, vous aurez probablement envie de choisir votre favori.