Question

我被要求创建一个网站，动画需要与链接上显示的内容相同http://www.piperdesign.co.uk/clients/sanctum/demo2/sanctum_HEX.html

我已经做了很多，但问题是动画不够流畅。

以下是我已经创建了动画http://rapidzdev.co.uk/sanctum/

的链接

以下代码就是我已经完成的。

$('#main-menu ul li').on('click','a',function(e){
   e.preventDefault();
   var link = $(this).attr('href');
   var title = $(this).html().replace(' ','-').toLowerCase();
   var scroll = $('#'+title).offset().top;
   $('body').stop().animate({'scrollTop':scroll},'slow', 'easeOutCirc');
   return false;
})

非常感谢任何帮助。

由于

Answer 1

试试这个并更新你的jquery。

$（'body'）。stop（）。animate（{'scrollTop'：scroll}，600）;

Answer 2

要获得更流畅的动画，请不要使用jQuery。你正在制作一个大图像和昂贵的礼仪：背景位置。

你应该试着让事情更顺畅：

使用CSS动画或requestTimeFrame代替jQuery
动画顶部或翻译礼节而不是背景位置
通过使图像元素绝对定位来最小化回流

Jquery动画scrollTop不流畅（视差效果）

2 个答案: