Question

是的，这个问题已被回答了很多次：

jQuery disable enable click event with fade jQuery prevent multiple clicks until animation is done Disabling clicking when using .fadeOut() in jQuery jQuery - Disable Click until all chained animations are complete

列表可能会继续下去。但我似乎无法使用我的代码中的任何一个！

$(document).ready(function(){
$('#firstNewMap,li.linkToSecondMap').click(function(e){
    $('div#mainMap').fadeOut('slow', function(){
        $('div#secondMap').fadeIn('slow');
    });
    $("#tagWrap").collapse('hide');
    $("div#secondLinks,ul#querySecondToggle,li.bkbtn,ul#secondBuildingsDropdown").css("display","block");
    $("div#mainLinks,ul#queryMainToggle,ul#mainBuildingsDropdown").css("display","none");
});
});

li.linkToSecondMap所在的HTML代码：

<div id="mainLinks">
     <li ng-repeat="x in mainLinks" class="myList {{x.id}}"><a href="{{x.link}}">{{x.name}}</a></li>
</div>

{{x.id}}是linkToSecondMap

代码在其他方面工作得非常好。我刚才注意到，如果点击太快，你会得到地图的两个图像（div#mainMap和div#secondMap），但是其他任何东西都没有被交换，但可能是因为它们不会褪色。

Answer 1

您可以尝试以下解决方法。

var timeoutClick = true;
$(document).ready(function(){
    $('#firstNewMap,li.linkToSecondMap').click(function(e){
        if (timeoutClick) {
            $('div#mainMap').fadeOut('slow', function(){
                $('div#secondMap').fadeIn('slow');
            });

            $("#tagWrap").collapse('hide');
            $("div#secondLinks,ul#querySecondToggle,li.bkbtn,ul#secondBuildingsDropdown").css("display","block");
            $("div#mainLinks,ul#queryMainToggle,ul#mainBuildingsDropdown").css("display","none");

            timeoutClick = false;
            setTimeout(function(){ 
                timeoutClick = true;
            }, 1000);
        }
    });
});

Answer 2

修正了它：

$(document).ready(function(){
$('#firstNewMap,li.linkToSecondMap').click(function(e){
    $('div#mainMap').fadeOut('slow', function(){
    $("#tagWrap").collapse('hide');
    $("div#secondLinks,ul#querySecondToggle,li.bkbtn,ul#secondBuildingsDropdown").css("display","block");
    $("div#mainLinks,ul#queryMainToggle,ul#mainBuildingsDropdown").css("display","none");
        $('div#secondMap').fadeIn('slow');
    });
});
});

当事情发生变化和更新时，我后来又遇到了问题。这是我的新代码，使用原始帖子中的评论建议进行了新的修复：

var $map = $('.'+initialOut+'Map');

    $map.stop().fadeOut('slow',function(){
        $('.'+initialOut+'Details,.bkbtn'+backOut).css("display","none");
        $('.'+initialIn+'Details,.bkbtn'+backIn).css("display","block");
        $('.noQuery').css("display","none");
        $("#buildingHeader").html(name);
        $('.'+initialIn+'Map').fadeIn('slow').css("display","block");
    });

这会导致第一次点击的动画停在其轨道中，而不是完成第二个动画。简单。

如何防止淡入淡出期间多次点击时出现的错误/故障？

2 个答案: