页面

时间:2015-07-26 08:04:12

标签: jquery transition fade scrolltop

我正在尝试在我的网站页面之间设置转换,如下所示: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

  • 最后我们得到了新的页面

  • 页面加载时的内容淡入

但是我遇到了一些问题: - 新页面的内容在转换之前快速显示,因此它会轻弹 - 当您点击页面底部的链接

时,滚动顶部过渡太快

有什么想法改进我的代码吗?

非常感谢!

0 个答案:

没有答案