Question

我有一个带<ul>的简单菜单。每个<ul>在点击它时将其内容加载到<div>。

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

我想要的是，当旧内容 FULLY 从页面上消失时，新内容会显示在其位置，并且不在彼此之下，然后一个位于第二个。

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

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

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

Demo

另外，您可能希望在文档就绪

上添加此内容

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

并摆脱

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

Demo

Answer 3

一个解决方案：

使用延迟等到淡出结束后。你可能需要玩数字

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

将内容加载到div onclick - FadeOut（），FadeIn（）

3 个答案:

Demo

Demo