jquery - 如何以线性方式执行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 向上滑动，在完成向上滑动后，我希望 Shakespeare 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 .

<小时/>

还要考虑以不显眼的方式绑定(bind)您的处理程序，例如将链接更改为:

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