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() {
            console.log('off');
            //do stuff
        });
    }

    $tabContainer.addClass('featured');


    $menu.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', $tabContainer, function(e) {
            console.log(e.originalEvent);
            //do stuff
    });

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

• jquery
• css3
• css-animations

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');

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.