how to excecute Jquery functions in a linear fashion? (sequentially)

Question

I am not sure how to describe this. I have a couple of divs on a page, something like:

<div id="Content">
    <div id="SubContent" class="LoremIpsum">
        some lorem ipsum text here
    </div>

    <div id="SubContent" class="Shakespeare" style="display:none">
        Macbeth story here
    </div>
</div>

<a href="Javascript:Void(0);" onClick="ChangeStory">Change</a>

So now, When I click on that "Change" link, I want the LoremIpsum div to slide up, and AFTER it finishes sliding up, I want Shakespeare div to slide down.

Currently, I have:

function ChangeStory(){
    $('.LoremIpsum').slideUp(); 
$('.Shakespeare').slideDown();
}

Instead of the events happening one after the other, they are happening simultaneously. I tried to insert some timing delay but did not quite work out well. Any ideas on how to run them one after the other?

many thanks!

Answer 1

You can use the .slideUp() callback (all animations have them), like this:

function ChangeStory(){
  $('.LoremIpsum').slideUp(function() {
    $('.Shakespeare').slideDown();
  }); 
}

You can test it here. Or, just add a .delay() with the duration of the other animation, though this would only be preferred in certain situations:

function ChangeStory(){
  $('.LoremIpsum').slideUp();
  $('.Shakespeare').delay(400).slideDown();
}

Try that version here.

---

Also look at binding your handler unobtrusively, for example change your link to this:

<a href="#" class="ChangeStory">Change</a>

And your JavaScript to this:

$(function() {
  $("a.ChangeStory").click(function (e){
    $('.LoremIpsum').slideUp(function() {
      $('.Shakespeare').slideDown();
    }); 
    e.preventDefault(); //prevent scrolling to top
  });
});

You can test it out here.