анимация jQuery пропускается при быстром нажатии

0

Пожалуйста, взгляните на этот jsfiddle

Если вы достаточно быстро нажмете на div сверху, вы обнаружите, что в итоге появляются два div. Раньше у меня была и проблема с jQuery. В этом случае я просто отключил кнопки (или триггеры анимации), но мне интересно, есть ли более элегантное решение для этого.

Вот мой код jQuery -

        $(function () {
            var _animDuration = 400;
            $("#tabLists a").click(function () {
                var attrHref = $(this).attr('href');
                // Get shown anchor and remove that class -
                $('.shownAnchor').removeClass('shownAnchor');
                $(this).addClass('shownAnchor');
                // first hide currently shown div,
                $('.shownDiv').fadeOut(_animDuration, function () {
                    debugger;
                    // then remove the shownDiv class, show the clicked div.
                    $(this).removeClass('shownDiv');
                    $('#' + attrHref).fadeIn(_animDuration, function () {
                        // then add that shownDiv class to the div currently being shown.
                        $(this).addClass('shownDiv');
                    })
                });
                return false;
            });
        });

Я использую обратные вызовы повсюду. Я бы хотел, чтобы решение, которое помещало бы в очередь анимацию, а не, не позволяло мне щелкнуть

  • 0
    Я щелкнул, щелкнул, щелкнул и щелкнул, но все, что произошло со мной, - это исчезновение текста.
Теги:

1 ответ

0

попробуйте этот код с помощью проверки var:

$(function(){
                var check = 1;
                var _animDuration = 400;
                $("#tabLists a").click(function(){
                    if(check == 1){
                        check = 0;
                        var attrHref = $(this).attr('href');                    
                        // Get shown anchor and remove that class -
                        $('.shownAnchor').removeClass('shownAnchor');
                        $(this).addClass('shownAnchor');
                        // first hide currently shown div,
                        $('.shownDiv').fadeOut(_animDuration, function(){
                            debugger;
                            // then remove the shownDiv class, show the clicked div.
                            $(this).removeClass('shownDiv');
                            $('#' + attrHref).fadeIn(_animDuration, function(){
                                // then add that shownDiv class to the div currently being shown.
                                $(this).addClass('shownDiv');   
                                check = 1;
                            })
                        });
                    }
                    return false;
                });
            });

DEMO

  • 0
    Я хотел бы выбрать вариант, который поставил бы в очередь анимацию, а не позволил бы мне нажимать

Ещё вопросы

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