1

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

最初我有一个函数'goto（）'，它被触发'onClick'，并且动画完全按预期工作。

我想清理 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

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

谢谢

4

1 回答 1

3

您不会阻止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);
});

你会在这里找到一个更新的小提琴。

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

于 2012-11-06T11:04:12.583 回答