Question

我有一个菜单，可以在我的网站的几个部分左右滑动。

最初我有一个功能＆＃39; goto（）＆＃39;，它已被触发＆＃39; onClick＆＃39;，动画完全符合预期。

我想清理HTML，所以我在JS文件中为click事件添加了一个绑定处理程序。

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事件的默认行为。由于点击发生在锚点元素上，因此浏览器会尝试在动画期间滚动到点击的锚点的位置，从而导致您遇到的问题。

您可以使用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);
});

您会找到更新的小提琴here。

（注意上面的代码使用on()而不是bind()，前者比jQuery 1.7更优先于后者。

jQuery动画“正确”的位置问题

1 个答案: