jQuery animate 'right' 位置问题

Question

我有一个菜单，可以左右滑动浏览我网站的多个部分。

最初我有一个函数“goto()”，它被“onClick”触发，并且动画完全按照预期工作。

我想清理 HTML，因此我向 JS 文件中的单击事件添加了绑定(bind)处理程序。

var navanchors = $('#navMain a');
var slider = $('#slider');

init = function() {

navanchors.bind('click', function() {

    var t = $(this);
    var id = t.attr('href');
    var dist = $(id).position().left;

    //animate to the div id.
    slider.animate({
        "right": (dist)
    }, 600);

});
};

init();​

左侧动画似乎按预期工作，但右侧动画关闭。第一次单击时，动画似乎移动了预期距离的两倍。第二次单击时，它会重置且没有动画。

请查看此处的问题:http://jsfiddle.net/Kj4bU/1

我已经搜索并尝试过，但不知所措。任何帮助将不胜感激。

谢谢

Answer 1

您并没有阻止您处理的click事件发生默认行为。由于点击发生在 anchor 元素上，因此浏览器将在动画播放期间尝试滚动到被点击的 anchor 位置，从而导致您遇到问题。

您可以使用event.preventDefault()抑制这种行为:

navanchors.on("click", function(e) {
    e.preventDefault();

    var t = $(this);
    var id = t.attr("href");
    var dist = $(id).position().left;

    //animate to the div id.
    slider.animate({
        "right": dist
    }, 600);
});

您会发现更新的 fiddle here .

(请注意，上面的代码使用 on() 而不是 bind() ，自 jQuery 1.7 起，前者优于后者)。