Search code examples
jqueryeventsevent-bubbling

Slideout Bug Triggering Twice


Having some issues with events triggering in a weird way. If you hit open and close a few times on the jsfiddle below you will see what's happening:

http://jsfiddle.net/rzs7x4ab/5/

$('.btn-open-wrapper').on('click', function (event) {
    event.stopPropagation();
    $(".blackboard-wrapper").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (event) {
        $('.btn-open-wrapper').addClass('is-hidden');
        $('.btn-close-wrapper').addClass('is-visible');
    });
    $('.blackboard-wrapper').addClass('is-open');
});


$('.btn-close-wrapper').on('click', function (event) {
    $('.btn-open-wrapper').removeClass('is-hidden');
    $('.btn-close-wrapper').removeClass('is-visible');

    event.stopPropagation();
    $(".btn-close-wrapper").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (event) {
        $('.blackboard-wrapper').removeClass('is-open');
    });
});

Solution

  • (Firefox does it pretty well)
    The reason is camelCase transitionEnd (you did not used)

    Fixed (test in Chrome)