滑动网页过渡(jQuery)

| 尽管此网站上有类似的问题,但似乎我的问题还不能完全回答... 我有一个5个静态页面的网站,看起来像一家美发沙龙。我希望每个页面过渡看起来就像用户在沙龙中滑动(环顾四周)。这意味着需要将内容(.content div)滑出,然后将下一页滑入。如果可能的话,能够向链接添加不同的类以更改页面和新页面滑入/滑入的方式会很好。 (即,从右到左或从左到右)。应当注意,导航栏,徽标和页脚不会滑动,因为它们在每页上都位于同一位置。 我设法用jQuery获得淡入淡出效果:
$(\".content\").css(\"display\", \"none\");
$(\".content\").fadeIn(2000);
$(\"a.transition\").click(function(event) {
    event.preventDefault(); 
    linkLocation = this.href; 
    $(\".content\").fadeOut(1000, redirectPage); 
});
function redirectPage() {
    window.location = linkLocation;
}
但是,实际上这很笨拙,我希望能够以类似于jQuery缓动的方式滑动页面。由于SEO的原因,我不想建立一个网页。我不确定ajax是否是答案,但从未尝试过,因此没有使用它的经验。 谢谢, 杰米     
已邀请:
        您可以使用jquery的全景插件: 插件1 插件2 插件3 您还可以检查: 这篇关于SO的帖子     
        我不明白为什么无法将所有内容一起加载并按需隐藏/显示它们。 如果搜索引擎机器人忽略不可见的内容,请考虑使用SEO。我认为用Javascript加载新页面不会使它变得更好,我不确定,如果我错了,请纠正我。 为了使动画流畅,我认为您必须预先加载内容。无论您如何优化页面,都仍然需要花费一些时间来加载它们,它肯定比动画持续时间更长,而且还取决于用户的网络/设备/位置...     

要回复问题请先登录注册