fondu dans les éléments de la liste séquentielle avec jQuery

Je suis en train de construire un portefeuille de page qui contient une liste des différents projets (dans une liste non triée). Au chargement de la page je veux avoir chaque "li" pour le fondu, l'un après l'autre. J'ai réalisé cette manière:

var eT = 0;     
$('.everything').hide().each(function() {
    $(this).delay(eT).fadeIn('slow');
    eT += 200;
});

Le problème que j'ai, c'est que chaque li aura une classe (ou plusieurs) en fonction du type de travail (web, print, etc) qu'il représente. Il y a une navigation sur le côté qui permet de filtrer le type de travail à l'écran. Ce que j'ai rencontrés, c'est que si je clique sur les filtres, tandis que l'animation est toujours en cours de chargement dans les éléments, les choses deviennent vraiment pénibles.

Voici le template de la page travail à l'heure actuelle:
http://jjaakk.miller-interactive.com/templates/work.html

J'ai essayé beaucoup de choses, mais avec un succès limité. Des idées sur la façon de faire ce travail dans un cadre plus stable?

J'ai essayé d'ajouter .stop() sur un clic, mais il n'a pas fonctionné comme je l'ai prévu.

exemple de lien est cassé

OriginalL'auteur Jonathan Miller | 2011-04-13

  1. 4

    Je pense que le problème était lié à une limitation avec jQuery delay(). Celui-ci utilise javascript standard setTimeout et clearTimeout comme suggéré par le jQuery delay() de l'api.

    <html>
<head>
<script src="./jquery-ui-1.8.7.custom/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var timeOuts = new Array();
var eT=200;
function myFadeIn(jqObj) {
jqObj.fadeIn('slow');
}
function clearAllTimeouts() {
for (key in timeOuts) {
clearTimeout(timeOuts[key]);
}
}
$('.everything').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
$('#something').click(function() {
clearAllTimeouts();
$('.everything').stop(true,true).hide();
$('.something').each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
});
});
</script>
<style type="text/css">
li.everything {width:40px;height:40px;background:#bbb;display:inline-block}
li.something {width:80px;height:80px;background:#000;display:inline-block}
</style>
</head>
<body>
<button id="something">BLACK</button>
<ul>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
</ul>
</body>
</html>
    Merci!!!! Je vais analyser cela plus donc je comprends tout ce qui se passe, mais à partir de mes premiers tests, il semble fonctionner parfaitement! J'ai vraiment apprécier vraiment l'aider!

    OriginalL'auteur nhavens

  2. 3

    Je sais que vous avez dit que vous avez essayé d'ajouter le .stop() sur cliquez sur. Le code suivant est exactement ce que fait, mais fonctionne très bien pour moi. Si ce n'est pas ce que vous cherchez, veuillez expliquer dans les commentaires.

    <html>
<head>
<script src="/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var eT=0;
$('.everything').hide().each(function() {
$(this).delay(eT).fadeIn('slow');
eT += 200;
});
$('.everything').click(function() {
$('.everything').stop(true,true).fadeIn();
});
});
</script>
<style type="text/css">
li.everything {width:40px;height:40px;background:#bbb;display:inline-block}
</style>
</head>
<body>
<ul>
<li class="everything"></li>
<li class="everything"></li>
<li class="everything"></li>
<li class="everything"></li>
<li class="everything"></li>
</ul>
</body>
</html>

    Travail Démo

    J'ai testé ton code et il n'est pas tout à fait ce que j'ai l'intention de le faire. Oui je veux que le LI est à la charge de manière séquentielle. mais l'événement click est sur la navigation, pas les LI eux-mêmes. J'ai obtenu tout ce qu'il fonctionne. Le problème, c'est lorsque vous cliquez sur l'un des filtres tandis que le fadein sont toujours en cours, vous obtenez le chevauchement des animations. Je veux le clic pour tuer le courant de l'animation, de masquer tous les éléments de la liste et afficher uniquement celles fondées sur le filtre. Si vous allez sur: jjaakk.miller-interactive.com/templates/work.html et cliquer sur les liens sous "montrez-moi" rapidement vous verrez ce que je veux dire.
    Voici ma fonction: code $('#secondary ul li a').click(function(){ var llid = $(this).attr('id'); var eT= 0; $('.' + llid).each(function(){ $('.everything').hide(); $(this).delay(eT).fadeIn('slow'); eT += 200; }); });
    Je vois ce que tu veux dire à propos de la superposition des animations. Je pense que le problème est lié à une limitation avec jquery delay(). Voir la case juste au-dessus de l'Exemple ici. J'ai posté une deuxième réponse qui utilise la norme de javascript setTimeout et clearTimeout.

    OriginalL'auteur nhavens

  3. 2

    Multiples retard par index

     var eT = 0;     
$('.everything').hide().each(function(index) {
$(this).delay(eT*index).fadeIn('slow');
eT += 200;
});
    Cela n'a pas fonctionné. Ce qu'elle voulait faire était d'augmenter le délai de la minuterie avec chaque charge... certainement pas ce que je cherche à faire! 🙂

    OriginalL'auteur Hussein