Question

如果你足够快地点击顶部的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;
            });
        });

我到处都在使用回调。我想要一个排队动画的解决方案，而不是让我点击

Answer 1

使用check 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

快速单击时跳过jQuery动画

1 个答案: