使用 .load() 和 fadeIn() 替换内容

Question

好吧，我尝试了几种不同的方法，没有一个令我满意，所以我来问。

我为一个网页创建了一个很棒的侧边导航。当单击导航的链接时，我尝试使页面的#content 替换为另一个，我想制作类似ajax 的平滑替换效果。

我对 Javascript 还很陌生，但发现了 .replaceWith() 东西。现在，我对源进行了各种操作，但无法使其工作。我尝试的是使用 .click() 执行 .replaceWith() 并通过fadeOut() 替换当前内容和fadeIn() 新内容。

在我编写的其中一个代码中，它确实通过淡化成功替换了内容，但是当用户第二次单击导航链接时，内容将增加一倍和三倍..

制作流畅的#content-replacing 淡入淡出效果的最佳方法是什么？

Answer 1

你需要先隐藏它，否则fadeIn不会有任何效果。

Live example.

在您的情况下，您可能需要使用 jQuery get 方法来加载不同页面的内容。