Функция jQuery transitionend каждый раз, когда я повторяю свой клик

0

Как предотвратить openContent(); нажимать $("#load-content").on("transitionend каждый раз, когда я нажимаю .show-content???

Я не знаю, как остановить этот transitionend чтобы его пнули! Пожалуйста, помогите

$('.show-content').on('click', function (e) {
  e.preventDefault();
  openContent();
});
$('#load-content').on('click','.prev',function (e){
  e.preventDefault();
  closeContent(this);
});
function openContent(){  
    $('#load-content').load('../views/product-page.html');
    $('.container').addClass('loaded');
    $("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
    $(this).addClass('animate');
    var body = $("body,html");
    body.animate({
      scrollTop: 0
    }, 800);
});
}
function closeContent(ele){
    var Loaded = !$(ele).closest('.container').hasClass('loaded');
    if (!Loaded) {
        $('.animate').removeClass('animate');
        $("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
            $('.loaded').removeClass('loaded');
            $('#show-content').remove();
        });
    }           
}
  • 0
    где HTML?
  • 0
    jsfiddle.net/PcB4U/1 что-то в этом роде! не идеально извините
Теги:

2 ответа

2
Лучший ответ

как правило, вы должны пропустить пробел в событии и off событие после увольнения

$el.on('transitionend.mynamespace' function(){
    $el.off('transitionend.mynamespace')
});

Пример:

$dropdown.on('transitionend.fadein' function() {
    // some function to be called on transitionend
    doSomething();
    // event will not be called again
    $dropdown.off('transitionend.fadein')
});

ОБНОВИТЬ


адаптирован к вашему коду

(вы также используете слишком много переходных хендлеров)

Я создал пространство имен с подпространством e, поэтому теперь вы можете сказать
.off('transitionend.loadcontent ')
.off('transitionend.loadcontent.open ')
.off('transitionend.loadcontent.close ')

Попробуйте, кто будет делать то, что вам нужно

Вы должны полностью прочитать это: http://api.jquery.com/event.namespace/

Также код выглядит не слишком удивительно.
Для улучшения удобочитаемости и производительности следует учитывать более последовательные стили кодирования и кеш-кеширования. Например, я заменил все " с ' так как вы использовали смешанные кавычки. Возможно, запустите jsHint в вашем редакторе и кешируйте все элементы, которые нужны более одного раза. Но это не очень важно для этой работы.

$('.show-content').on('click', function(e) {
    e.preventDefault();
    openContent();
});
$('#load-content').on('click', '.prev', function(e) {
    e.preventDefault();
    closeContent(this);
});

function openContent() {
    $('#load-content').load('../views/product-page.html');
    $('.container').addClass('loaded');
    $('#load-content').on('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open', function() {
        $(this).addClass('animate');
        var body = $('body,html');
        body.animate({
            scrollTop: 0
        }, 800);
        $('#load-content').off('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open');
    });
}

function closeContent(ele) {
    var Loaded = !$(ele).closest('.container').hasClass('loaded');
    if (!Loaded) {
        $('.animate').removeClass('animate');
        $('#load-content').on('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close', function() {
            $('.loaded').removeClass('loaded');
            $('#show-content').remove();
        });
        $('#load-content').off('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close');
    }
}
  • 0
    Вы могли бы адаптировать его к моему коду, пожалуйста?
  • 0
    было бы хорошо, если бы вы могли помочь, так как я не уверен, что смогу собрать эту функцию в одиночку
Показать ещё 2 комментария
0

вам может понадобиться

   $ele.one('click',function(){...})

который позволяет связать событие только один раз. после увольнения слушатель этого события отвяжет себя. проверьте документ здесь: https://api.jquery.com/one/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню