jquery animate one element after another

Question

I'm trying to create a small sequence of animations with jQuery but cannot get it to work!

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

By clicking on span.expand I want to first move div.inner up 240px whilst fading the span.expand out. After that has happened I want the hidden p.fade paragraphs to fade in.

I can only get all 3 animations to happen at the same time, or with the above code only the first 2 animations happen, the third does not work t all.

I know it's down to how I've written the jquery but cannot seem to get it working!! Can anyone help?

Answer 1

You call to .animate() is a bit off, the options should look like this:

$('.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...or you can pass the last 3 options as a single parameter in an object, but not as distinct objects in separate parameters.