.off not unbinding animationend event

Go To StackoverFlow.com


Alright, so I am making an animated menu that slides/expands tabs back and forth and will look fluid. I have it all working except for unbinding the animationend event which I am attaching to the clicked tab. So pretty much you click a tab, a listener is attached to it for the end of the animations and on the click of the next tab I want to unbind the listener to the tab that was previously clicked. However, I cannot get the .off function to fire for some reason. Here is my code below

var $featuredTab = this.$('.featured'),
    $tabContainer = $(e.target).parent(),
    $menu = this.$el,
    index = $tabContainer.index(),
    count = $tabContainer.parent().children().length; 

    if($featuredTab.length > 0) {
        $menu.off('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', $featuredTab, function() {
            //do stuff


    $menu.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', $tabContainer, function(e) {
            //do stuff

any ideas as to why the off event isn't firing?

2012-04-03 19:56
by user834418
What does this refer to - Rory McCrossan 2012-04-03 19:58
It's about unbinding jQuery events - Francisc 2012-04-03 19:58


Assuming that you are treating second parameter as a selector then you are using on incorrectly. The second parameter is a selector(string) where you are passing an object. The second(selector) and third(data) parameters are optional.

Take a look here - http://api.jquery.com/on/

However you can try this.

$menu.off('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd');
2012-04-03 19:58
by ShankarSangoli
balls - u r right. "selector: A selector string - user834418 2012-04-03 20:00
@ShankarSangoli The selector is optional. When you pass in a data object, it'll be available in event.data for the triggered event handler - scurker 2012-04-03 20:03
I don't see it anywhere being used as data in the code - ShankarSangoli 2012-04-03 20:04
it is... just didn't feel like putting all the code in. got it figured out, just ended up attaching to selected elemen - user834418 2012-04-03 20:27


Because off() doesn't trigger an event.

The off() method removes event handlers that were attached with .on().

It looks like you want to unbind any events that were previously attached to the menu:

// this removes ALL events
$menu.off('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd');

If you want to only remove your event, see this example from the documentation.

2012-04-03 20:11
by scurker