1

我不确定如何描述这一点。我在一个页面上有几个 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();
}

它们不是一个接一个地发生，而是同时发生。我试图插入一些时间延迟，但效果不佳。关于如何一个接一个地运行它们的任何想法？

非常感谢！

4

1 回答 1

6

您可以使用.slideUp()回调（所有动画都有它们），如下所示：

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

你可以在这里测试它。或者，只需.delay()在其他动画的持续时间中添加 a，尽管这仅在某些情况下是首选：

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
  });
});

你可以在这里测试一下。

于 2010-11-01T11:04:14.763 回答