滑动网页转换 (jQuery)答案

【问题标题】：Sliding web page transitions (jQuery)滑动网页转换 (jQuery)
【发布时间】：2011-09-04 05:39:01
【问题描述】：

虽然这个网站上有类似的问题，但似乎没有一个完全回答我的问题......

我有一个 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 是否是答案，但从未探索过它，因此没有使用它的经验。

谢谢，

杰米

【问题讨论】：

easing 不是过渡类型。它更确切地说定义了动画参数在整个动画期间如何变化。有不同类型的缓动，导致不同外观的动画。但是，它不会“自行”为任何东西设置动画。如果您不想将所有子页面包含在一个页面中，则必须使用 AJAX 来获取每个子页面的内容，或者在每次页面加载时添加“滑入”效果并使用“滑出”每页卸载。我的建议是让您的网站保持原样，并使用 JS 更改行为（如果可用），使用 AJAX 加载子页面。

标签： jquery ajax slide transitions

【解决方案1】：

您可以使用jquery的全景视图插件： Plugin 1 Plugin 2 Plugin 3 您还可以检查： This post on SO

【讨论】：

我喜欢这个插件，但是问题是点击链接时在html页面之间滑动；以及与页面中心对齐的页面部分。

【解决方案2】：

我不明白为什么不能将所有内容一起加载并按需隐藏/显示。

如果搜索引擎机器人忽略不可见的内容，请考虑 SEO。我不认为使用 Javascript 加载新页面会使它变得更好，我不确定，如果我错了，请纠正我。

为了使动画流畅，我认为您必须预加载内容。不管你如何优化你的页面，加载它们仍然需要时间，它肯定比你的动画持续时间长，而且它还取决于用户的网络/设备/位置...

【讨论】：