Question

我正在尝试创建图库。在底部我有一条缩略图，这些缩略图在您单击箭头时左右滑动，但如果您多次单击箭头，则会对该功能产生影响。

我想在运行该函数时删除click处理程序，然后再次替换它。

在旁注中，我的缩略图滚动条使用margin-left来设置动画，是否可以使用scrollTo或类似方法，以水平方式移动元素特定量，因此如果缩略图改变大小，它仍然可以工作？ / p>

Answer 1

有很多方法可以做到这一点。最简单的方法是不删除点击处理程序，但如果它已经动画化，则在回调中什么都不做，例如：

$('.thumb').click(function() {
    if ($('#thumb-strip:animated').size() != 0)
        return;

    /* else animate #thumb-strip */
});

如果您想要删除点击处理程序并在之前添加，请执行以下操作：

var animateHandler = function() {
    var params = {}; // animate params
    $('.thumb').unbind('click', animateHandler); // unbind the click handler
    $('#thumb-strip').animate(params, function() {
        $('.thumb').click(animateHandler); // re-bind the click handler when animation is done
    });
};
$('.thumb').click(animateHandler);

毋庸置疑，第一种方式更简单。

然而，我通常做的并不是阻止点击事件发生，因为用户不会期望，但我也想摆脱动画的排队。因此，您可以做的是允许用户点击一个拇指，并使用stop立即使其动画到新地点：

$('.thumb').click(function() {
    var params = {}; // animate params
    $('#thumb-strip').stop().animate(params);
});

这是最简单，最直观的解决方案。

要回答第二个问题，您可以使用$(this).position()获取拇指与父母的相对位置，然后根据该动画制作动画。

jQuery - 如何在动画或函数运行时删除事件处理程序？

1 个答案: