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 MarioD

...發生了什麼？預期的結果是什麼？ – 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)

來源

2014-10-19 20:55:48

羅科，驚人的捕捉 - 感謝您的領導:) – 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'); 
});

編輯：哦，等等，這是駝峯問題。我的代碼有不同的行爲。

來源

2014-10-19 21:00:38

Slideout Bug觸發兩次

回答

相關問題