代码之家 › 专栏 › 技术社区 › LocustHorde

如何以线性方式执行jquery函数?(按顺序)

sequential jquery

1

LocustHorde · 技术社区 · 14 年前

我不知道该如何描述这个。我在一页上有几张沙发,比如:

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

所以现在,当我点击它的时候” 变化 “链接,我想让洛雷米普森DIV向上滑动,当它完成向上滑动后,我想让莎士比亚DIV向下滑动。

目前,我有:

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

这些事件不是一个接一个地发生,而是同时发生的。我试图插入一些时间延迟,但没有很好地解决。关于如何一个接一个地运行它们有什么想法吗?

非常感谢!

1 回复 | 直到 14 年前

1

6

Nick Craver 14 年前

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

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

You can test it out here