jquery anime un élément après l'autre

Question

J'essaie de créer une petite séquence d'animations avec jQuery mais je n'arrive pas à le faire fonctionner!

HTML:

<div class="outer"> 
    <div class="inner"> 
     <p>First line visable.</p> 
     <span class="expand">Read more</span> 
     <p class="fade">Line one</p> 
     <p class="fade">Line two</p> 
     <p class="fade">Line three</p> 
     <p class="fade">Line four</p> 
    </div> 
</div> 

CSS:

.inner { 
    position:relative; 
    left:100px; 
    width:260px; 
    padding:8px 14px 10px 14px; 
    background:#FFF; 
    border:1px solid #CAC9C1; 
    -webkit-border-radius:8px; 
    -moz-border-radius:8px; 
    border-radius:8px } 

    .inner span.expand { 
     position:absolute; 
     top:10px; 
     right:10px; 
     display:block; 
     width:12px; 
     height:12px; 
     text-indent:-999em; 
     cursor:pointer; 
     background:transparent url(imgs/bg-sprite.png) no-repeat -580px -464px } 

    .inner span.expand:hover { background-position:-580px -478px } 

    .inner p.fade { display:none } 

jQuery:

$('.char-lpool .expand').click(function(){ 
    $(this).stop().fadeOut({duration:200}) 
    $(this).parent().stop().animate(
     {top:"-240"}, 
     {duration:300}, 
     {easing: 'easeOutCubic'}), function() { 
     $('.char-lpool .talk p.fade').stop().fadeIn({duration:200}) 
    } 
}); 

En cliquant sur span.expand Je veux d'abord déplacer div.inner jusqu'à 240px tout le fading span.expand out. Après cela, je veux que les paragraphes p.fade cachés s'affichent.

Je peux seulement obtenir que les 3 animations se produisent en même temps, ou avec le code ci-dessus seules les 2 premières animations arrivent, la troisième ne fonctionne pas. travail t tous.

Je sais que c'est à cause de la façon dont j'ai écrit la jquery mais je n'arrive pas à la faire fonctionner !! Quelqu'un peut-il aider?

Answer 1

Vous appelez à .animate() est un peu hors, les options devraient ressembler à ceci:

$('.char-lpool .expand').click(function(){ 
    $(this).stop().fadeOut({duration:200}) 
     .parent().stop().animate(
      {top:"-240"}, 
      300, 
      'easeOutCubic', 
      function() { $(this).find('p.fade').stop().fadeIn(200); } 
     ); 
}); 

You can test it here ... ou vous pouvez passer les 3 dernières options comme un seul paramètre dans un objet , mais pas en tant qu'objets distincts dans des paramètres séparés.