Question

更新：我制作了一个代表我的代码的Plunker，形式非常基本。如您所见，您可以导航到＆＃34; map2＆＃34;和＆＃34; map3＆＃34;然后到＃34; map4＆＃34;并回到＆＃34; map1＆＃34;轻松地点击＆＃34; Go To＆＃34;按钮没有搞乱导航的能力。但是，如果你＆＃34;意外＆＃34;单击后退按钮两次，突然堆栈被抛弃，它会导致＃34;导航＆＃34;。

您可以点击＆＃34;转到＆＃34;按钮可以根据需要多次使用，它永远不会弄乱导航。如何为后退按钮做同样的事情？

我知道的问题是没有任何东西被添加到＆＃34;堆栈＆＃34;变量当＆＃34;转到＆＃34;除非动画完成，否则单击按钮，但项目将从＆＃34;堆栈中删除＆＃34; ＆＃34; Back＆＃34;单击按钮。我只是不确定如何解决这个问题。

以下是原始代码，原始解释问题。但是，如果我们可以修复Plunker表示，我将能够理解如何解决这个问题。

以下我有：

$scope.clickLinks = function(initialOut,initialIn,backIn,backOut,name){

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

        stackMapOut.push(initialIn);
        stackMapIn.push(initialOut);
        stackBack.push(backIn);
        stackName.push(name);
    });
};

工作正常，一切都好，因为在动画完成之前没有任何东西被推送。但是，我有另一组可以单击的元素，这些元素基本上会回溯可见或不可见的元素。这是代码：

$scope.clickBack = function(){

    mapOut = stackMapOut.pop();
    mapIn = stackMapIn.pop();
    stackBack.pop();
    backIn = stackBack[stackBack.length-1];
    stackName.pop();
    nameShow = stackName[stackName.length-1];

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

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

然而，＆＃34; stacks＆＃34;是pop ped额外的，我不知道如何防止这种情况。我这次不能将它们全部放在.fadeOut函数中，因为它们需要在点击函数运行时启动。

我个人唯一想到的就是我需要找出如何做某事＆＃34;如果动画停止。但我还不知道如何去做或去哪看。

基本上我需要一种方法来防止它们在动画停止时成为pop ped。或者重新push或其他。

如果用.stop（）停止动画怎么办？

0 个答案: