如何以线性方式优化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();
  }); 
}

你可以在这里测试一下.或者,只需添加.delay()其他动画的持续时间,但在某些情况下这只是首选:

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

在这里尝试该版本.

另请参阅以不显眼的方式绑定处理程序,例如将链接更改为:

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

你的JavaScript是这样的:

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

你可以在这里测试一下.