jquery анимировать один элемент за другим

Question

Я пытаюсь создать небольшую последовательность анимаций с помощью jQuery, но не могу заставить его работать!

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

При нажатии на span.expand Я хочу первым двигаться div.inner до 240 пикселей в то время как замирание span.expand out. После этого я хочу, чтобы скрытые абзацы p.fade исчезали.

Я могу получить всего 3 анимации одновременно, или с приведенным выше кодом только первые 2 анимации происходят, третий не работайте все.

Я знаю, что дело дошло до того, как я написал jquery, но не могу заставить его работать! Может ли кто-нибудь помочь?

Answer 1

Вы звоните .animate() откусил, параметры должны выглядеть следующим образом:

$('.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 ... или вы можете передать последние 3 варианта как одного параметра в объекте , но не как отдельные объекты в отдельных параметрах.