我正在尝试在我的网站页面之间设置转换,如下所示:http://emilolsson.com/hi-response/(点击'查看示例'进入'3模块生成器'部分)。
所以这是Animate的scrolltop和fade的混合。
这是我目前的代码:
$(document).ready(function() {
$('#content').css({opacity: 0});
$('#content').fadeTo(250, 1);
$('a').click(function(event) {
event.preventDefault();
linkLocation = this.href;
$('#content').fadeTo(250, 0, function() {
$('html, body').animate({
scrollTop: 0
}, 500, redirectPage);
});
});
function redirectPage() {
window.location = linkLocation;
}
});
我的HTML标记如下所示:
<div id="header" style="position: fixed;">
<a href="newpage.php">Link</a>
</div>
<div id="content">
<p>Content</p>
</div>
正如你所看到的,我试图让这个效果啄食顺序:
页面加载时的内容淡入
单击链接时,内容为fadeOut
然后是窗口scrolltop
最后我们得到了新的页面
页面加载时的内容淡入
但是我遇到了一些问题: - 新页面的内容在转换之前快速显示,因此它会轻弹 - 当您点击页面底部的链接
时,滚动顶部过渡太快有什么想法改进我的代码吗?
非常感谢!