jquery - 将内容加载到 div onclick - FadeOut()、FadeIn()

Question

我有一个带有<ul>s 的简单菜单。每次点击它时都会<ul>将其内容加载到 a中。<div>

这是我的代码：http: //jsfiddle.net/EPvGf/16

所以为了能够理解我的问题，当你第一次打开页面时尝试点击任何<ul>（而不是默认的“描述”）。您可以看到应该加载（淡入）的内容位于之前的内容之下，当旧内容完成淡出时，淡入的新内容会上升以取代旧内容。

我想要的是，当旧内容完全从页面上消失时，新内容会出现在它的位置而不是彼此下方，然后一个会占据第二个的位置。

Answer 1

通过在 .pbox:visible fadeOut 上运行一个函数，您可以淡入新的 div（或运行您想要的任何其他代码）。

$('.pbox:visible').fadeOut('slow', function() {
    $('.pbox[id=' + $('.current a').attr('data-id') + ']').fadeIn('slow');
});

http://jsfiddle.net/EPvGf/20/

Answer 2

这是您需要在淡出方法中使用完整回调的地方：

$('.pbox:visible').fadeOut('slow', function(){
    $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow'); //After everything has been faded out fade in the corresponding div.
});

演示

另外，您可能希望将其添加到准备好的文档中

 $('.pbox:gt(0)').hide();  // hide everything but the first one first up. 

并摆脱

.find('a:first').click();

演示

Answer 3

一种解决方案：

使用延迟等到淡出完成后。你可能需要玩这个号码

$('.pbox[id=' + $(this).attr('data-id') + ']').delay(800).fadeIn('slow');