jquery在容器上设置动画，然后取消绑定事件

Question

您正在尝试在动画完成后取消绑定事件，并且不想在该容器上触发该事件。我的方法

$('#container').on('mouseover.grow', function(){
    $(this).parents('.secondary').animate({height:'360'},1000);
}).off('mouseover.grow');

但这种做法似乎不起作用。任何关于我在这里失踪的指针都将不胜感激......

Answer 1

如您所做的那样链接.off()方法将导致它立即触发。

您需要在.animate()方法的complete回调中调用它（即等到动画完成后）：

$('#container').on('mouseover.grow', function(){
    var $this = $(this); 

    $this.parents('.secondary').animate({height:'360'},1000, function() {
        $this.off('mouseover.grow');
    });
});

另请注意，我们指定var $this = $(this);，因为this的范围在回调函数中会有所不同。