2014-10-19 4 views
1

Наличие некоторых проблем с событиями, вызывающими странный путь. Если вы попали открывать и закрывать несколько раз на jsfiddle ниже вы увидите, что происходит:Ошибка выключения пуска Дважды

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'); 
    }); 
}); 
+0

... и что происходит? И каков ожидаемый результат? –

+0

Когда вы откроете его во второй раз, вы заметите, что черный квадрат не остается открытым, как в первый раз. Я бы хотел, чтобы во второй раз вы открыли функцию для работы точно так же, как и первая. – MarioD

+1

Получил это, пришлось попробовать в разных браузерах ... Я могу заметить, что проблема возникает только в ** Chrome **, в то время как FF делает это хорошо (причина моего комментария выше) –

ответ

1

(Firefox делает это очень хорошо)
Причина в том, верблюжий transitionEnd (вы не использовали)

Fixed (test in Chrome)

+0

Roko, потрясающий улов - спасибо за головы :) – MarioD

+0

@MarioD приветствую :) –

0

Вы смешиваете Выделите выражения, щелкнув close. 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'); 
}); 

Edit: Ой, подождите, это вопрос верблюжьего. Мой код имеет другое поведение.