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;
            });
        });

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

4

1 回答 1

0

使用检查变量尝试此代码：

$(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;
                });
            });

演示

于 2013-11-14T19:56:56.900 回答