Edit in JSFiddle

var detectTransitionEvent   = function() {
    var element             = document.createElement('dummy');
    var events              = {
        'transition':       'transitionend',
        'OTransition':      'oTransitionEnd',
        'MozTransition':    'transitionend',
        'WebkitTransition': 'webkitTransitionEnd'
    };
    for(var event in events) {
        if("undefined" != typeof element.style[event]) {
            return events[event];
        }
    }
    return null;
};
$.fn.transitionEnd      = function(callback, propertyNames) {
    var $this           = $(this);
    var event           = detectTransitionEvent();
    var domElement      = $this.get(0);
    var wrapperCallback = function(e) {
        if("string" == typeof propertyNames) {
            if(-1 == propertyNames.split(' ').indexOf(e.originalEvent.propertyName)) {
                return;
            }
        }
        $(domElement).unbind(event);
        callback();
    };
    return $this.unbind(event).bind(event, wrapperCallback);
};

$('#width').click(function() {
    $(this).transitionEnd(function() {
        $('body').append('<br />transition ended (width)');
    }, 'width');
    $(this).toggleClass('wide');
});
$('#height').click(function() {
    $(this).transitionEnd(function() {
        $('body').append('<br />transition ended (height)');
    }, 'height');
    $(this).toggleClass('wide');
});
$('#first').click(function() {
    $(this).transitionEnd(function() {
        $('body').append('<br />transition ended (first)');
    });
    $(this).toggleClass('wide');
});

<button id="width">Width</button>
<button id="height">Height</button>
<button id="first">First</button>

button {
    width: 100px;
    height: 30px;
    transition: width 0.5s linear, height 1.5s linear;
}
button.wide {
    width: 200px;
    height: 200px;
}