jquery animate on the container and then unbind the event

Question

Hi am trying to unbind an event after the animation is done and do not want to fire that event on that container . My approach

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

But this approach does not seems like working . Any pointer on what I am missing in here will be appreciated...

Answer 1

Chaining the .off() method as you've done will result in it firing immediately.

You'll want to call it in the complete callback of the .animate() method (i.e. wait until the animate is complete):

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

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

Also note that we assign var $this = $(this); since the scope of this will be different in the callback function.