Jquery: comment: quand UL est affiché, avoir le premier LI animé 'gauche' 20px, puis à 0px, puis faire le deuxième LI faire cela, puis troisième, etc

Question

Lorsque UL.chapters est 'slideDown', avoir le premier Les 'chapitres LI' animent la propriété 'left' à 20px, puis reviennent à 0px, puis font que le second LI fasse la même chose, puis le troisième, et ainsi de suite. avec mon code, ils sont tous animés directement après UL.chapters glisse vers le bas, comment puis-je faire faire leur animation 1 à la fois, la seconde ne démarre pas jusqu'à ce que le premier a terminé, etc.

$('h1').click(function() { 
    $('UL.chapters').slideDown(500); 
    $('.chapters LI').each(function() { 
     $(this).animate({'left':'20px'}); 
     $(this).animate({'left':'0px'}); 
    }); 
}); 

code mis à jour .

Answer 1

Essayez ceci:

$(function() { 
    $('h1').click(function() { 
     $('.chapters').slideDown(500, function() { 
      doSlide($('.chapters li:first')); 
     }); 
    }); 

}); 


function doSlide(current) { 
    $(current).animate({ 
     'left': '20px' 
    }, function() { 
     $(current).animate({ 
      'left': '0px' 
     }, function() { 
      doSlide($(current).next('li')); 
     }); 
    }); 
} 

Cela appelle la fonction d'animation de diapositives sur la première <li> puis dans le rappel pour l'animation qu'il glisse à la position de départ, il appelle la fonction sur la prochaine <li>.

Voici une démo de celui-ci dans l'action: http://jsfiddle.net/CBNgR/

Answer 2

Avez-vous remarqué que la 4ème ligne de votre code est $ ('chapitres LI') au lieu de $ ('. Chapitres LI')?

Aussi vous vous répétez ici. Essayez ceci:

$('h1').click(function() { 
    $('UL.chapters').slideDown(500); 
    $('.chapters LI').each(function() { 
     $(this).animate({'left':'20px'}); 
     $(this).animate({'left':'0px'}); 
    }); 
}); 

Assurez-vous également que vos LIs sont en position absolument, ou bien votre Animer gauche auront des problèmes.