jQuery Animate 方法 - 持续时间不起作用答案

【问题标题】：jQuery Animate Method -- duration isn't workingjQuery Animate 方法 - 持续时间不起作用
【发布时间】：2012-06-01 01:43:02
【问题描述】：

我有一个 jQuery 滚动设置，但持续时间不能正常工作。在 Wordpress 网站的“关于页面”上，我想使用 jQuery，以便在单击照片时，它会向下滚动到相应的 div。滚动正在工作，但是，持续时间不是。滚动大约需要 1/4 秒，我设置持续时间的速度无关紧要。我所指的网站可以在：http://teamcoding.ca/corporate/about-test/

下面是jQuery滚动的源代码。

$(function(){
    $('a[href*=.staff_photos_indiv]').click(function() {
        if (location.pathname.replace(/^\//,") == this.pathname.replace(/^\//,") && location.hostname == this.hostname) {
            var $target = $target;
            $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, {easing:'easeInOutExpo',duration:1600});
                return false;
            }
        }
    }); 
});

【问题讨论】：

对于像我这样偶然发现的人：确保持续时间是数字而不是字符串，这解决了我的问题。

标签： jquery scroll duration

【解决方案1】：

我的猜测是您没有定义 'easeInOutExpo' 缓动函数，因为一般操作使用此代码：

$(document.body).animate(
    {scrollTop: "400px"}, {easing: "swing", duration: 1600}
);

而且，你可以在这里看到它的工作原理：http://jsfiddle.net/jfriend00/UbnUh/

【讨论】：

嗯，是的，该代码也适用于我。我认为问题在于“targetOffset”，但我不确定是否有替代方法可以访问特定的 div。
@mcranston18 - 您需要将“px”单位添加到 targetOffset？
@mcranston18 - 当你将它传递给动画时，你会添加单位。如果你没有它们，jQuery 可能会假设“px”单位（我不确定），但底层 CSS 需要所有维度的单位。

【解决方案2】：

调试方法是在chrome中打开页面，右键单击并选择最后一个菜单选项“Inspect Element”。

选择右侧最后一个选项卡，控制台，您将查看 JavaScript 中是否存在任何错误：

Uncaught Error: Syntax error, unrecognized expression: [href*=.staff_photos_indiv]

尝试一个更简单的选择器：

$('.staff_photos_indiv').click( ...

【讨论】：

感谢 hagope 的回答。我已经对我的代码进行了更改，但这仍然没有改变我的代码中持续时间仍然无法正常工作的事实？

【解决方案3】：

你在 jQuery 选择器中有一个错误。

Uncaught Error: Syntax error, unrecognized expression: [href*=.staff_photos_indiv]

这就是为什么click 事件甚至没有触发的原因。你看到的只是a href="#...的正常行为。

【讨论】：