如何以线性方式执行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 div向上滑动，并且在完成向上滑动后，我希望莎士比亚div滑下来。

目前，我有：

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