Javascript动画（）滚动不能按预期工作

-1

当我使用下面的代码时，它变得非常糟糕。Javascript动画（）滚动不能按预期工作

动画完成后，我滚动并翻动页面（文档）。

$(document).ready(function(){ 
    $(' .nav, .learn-more').click(function(event){ 
     $('html, body').animate({ 
     scrollTop: $("#"+event.target.id+".featurette").offset().top 
     }, 1000); 
    }); 
});

请参阅演示Codecademy。

来源

2014-08-30 Zachzhao

您的意思是'$（文件）.ready'不'（文件）.ready'？ – soktinpk 2014-08-30 20:59:07

欢迎来到StackOverflow。这是一个专业的问答网站。请访问[如何问]（http://stackoverflow.com/help/how-to-answer）网站。 – afzalex 2014-08-30 21:08:49

弹跳发生在动画尚未完成且脚本会保持页面滚动时，然后您尝试反向滚动，并且由于jQuery动画的工作方式，您的反滚动会被继续重置的滚动动画。

看着你的linked example，我发现你的动画为什么会跳动。您使用的连接单击处理程序的选择是，并在你的HTML，有2个.nav S，一个是另一个的孩子：

<div class="nav">
<div class="container">
<ul class="pull-leftnavnav-pills">
<li><a id="" href="#">Home</a></li>

正因为如此，动画被称为两次，导致闪烁。您应该将选择器修改为$('.nav .nav, .learn-more')，或使用更独特的东西，如$('.nav.nav-pills, .learn-more')。

$('.nav .nav, .learn-more').click(function(event){ 
    $('html, body').animate({ 
     scrollTop: $("#"+event.target.id+".featurette").offset().top 
    }, 2000); 
});

这里的代码共享您选择的平台的固定代码：http://www.codecademy.com/DJDavid98/codebits/GSoDQf

来源

2014-08-30 21:35:00 SeinopSys

我相信它完成了动画。检查这个类似的例子和我的：[另一个测试]（http://www.codecademy.com/Zachzhao/codebits/Nko89X/） – Zachzhao 2014-08-31 02:09:49

@Zachzhao当我等待动画完成后，我可以滚动页面一般。 – SeinopSys 2014-08-31 10:23:48

我的意思是这个：[test]（http://www.codecademy.com/Zachzhao/codebits/Apcux4） – Zachzhao 2014-08-31 18:03:37

Javascript动画（）滚动不能按预期工作

回答

相关问题