Как вызывать функции Jquery линейным способом? (последовательно)

Question

Я не уверен, как это описать. У меня есть несколько дивы на странице, что-то вроде:

<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> 

Так что теперь, когда я нажимаю на том, что «Изменить» ссылка, я хочу LoremIpsum ДИВ скользить вверх, и после того, как заканчивает скольжение вверх , Я хочу, чтобы Шекспирский дивизион соскользнул вниз.

В настоящее время у меня есть:

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

Вместо событий, происходящих один за другим, они происходят одновременно. Я попытался вставить временную задержку, но не очень хорошо работал. Любые идеи о том, как их запускать один за другим?

большое спасибо!

Answer 1

Вы можете использовать .slideUp() обратного вызова (все анимации есть), как это:

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

You can test it here. Или, просто добавьте .delay() с длительностью другой анимации, хотя это было бы предпочтительнее только в определенных ситуациях:

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

Try that version here.

---

Также обратите внимание на связывание обработчика ненавязчиво, например, изменить ссылку на это:

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

И ваш JavaScript к этому:

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

You can test it out here.