如何以线性方式优先执行Jquery函数？ （按顺序）

Question

我不知道如何描述这一点。我有一对夫妇的div的页面上，是这样的：

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