Slideout Bug触发两次

问题描述：

遇到一些事件触发怪异的事件。如果你打开放和对的jsfiddle关闭几次下面你会看到发生了什么：Slideout Bug触发两次

$('.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'); 
    }); 
});

...发生了什么？预期的结果是什么？ – 2014-10-19 20:47:30

当您第二次打开它时，您会注意到黑色方块不会像第一次那样保持打开状态。我希望你第二次打开功能就像第一次一样。 – MarioD 2014-10-19 20:50:48

明白了，不得不尝试在不同的浏览器...我可以注意到，问题只发生在** Chrome **，而FF做得很好（我上面评论的原因） – 2014-10-19 20:53:41

答

（Firefox没有它非常好）
原因是驼峰transitionEnd（你没用过）

Fixed (test in Chrome)

罗科，惊人的捕捉 - 感谢您的领导:) – MarioD 2014-10-19 20:58:16

@MarioD欢迎:) – 2014-10-19 20:58:57

答

你混点击关闭时编辑表达式。 Here's a working JSFiddle与您的代码进行比较。

例如：

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

应该是：

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

编辑：哦，等等，这是驼峰问题。我的代码有不同的行为。

Slideout Bug触发两次

相关推荐