停止一個事件，並在動畫完成後恢復w/Javascript/jQuery

Question

我搜索並找到了三個相當不錯的帖子，但他們都在點擊動畫，而不是點擊發送參數給一個函數，動畫不是.stop（ ），stop（true，true）或event.stopPropagation（）都可以工作，但也許我會把它放在錯誤的位置。因此我的問題。

我試圖阻止的是（無論什麼原因）點擊快樂旋鈕誰點擊所有可用的鏈接快速回來和第四，並擰緊用於計算滑塊div /圖像應該在哪裏的數學計算。一旦動畫停止，圖像就會變得非常糟糕，所以我需要了解該怎麼說，「好吧，點擊了某些東西，不允許任何其他點擊，直到看到合適的圖像。」

同樣，我試圖做的和我發現的區別在於，動畫調用不是直接在點擊下發生，而是在點擊進行了一些計算並將這些數字發送到不同的功能。

我有這樣的：

$('#navs li').click(function() { 
    var currentLocationNum = $('li.cs_current').index(); 
    var stepClicked = $(this).index(); 
    if (stepClicked == currentLocationNum) 
     { return false; 
     } 
     else { 
      var lftEdgeNx = $('.slidingChartHolder').position().left; 
      var newLeftEdge = (stepClicked - currentLocationNum) * imageWidth;    
      moveMaster(lftEdgeNx + newLeftEdge, stepClicked); 
     } 
    }); 

和移動功能：

function moveMaster(leftEdge, newcs_current) { 
    $('.slidingChartHolder').fadeTo(200, .2).animate({ 
     left: leftEdge 
    }, "fast").fadeTo(200, 1); 
    $('li.cs_current').removeClass('cs_current') 
    $('li:eq('+newcs_current+')').addClass('cs_current'); 

     if ($('li.cs_current').index() === 0) { 
      $('#previous').addClass('hideMe'); 
      $('#next').removeClass('hideMe'); 
     } else if ($('li.cs_current').index()==4){ 
      $('#previous').removeClass('hideMe'); 
      $('#next').addClass('hideMe'); 
        } 
     else { 
      $('#previous').removeClass('hideMe'); 
      $('#next').removeClass('hideMe'); 
     } 
     } 

感謝一些見解！

Answer 1

我需要知道該說些什麼，「好的，點擊了某些東西，不要讓任何其他點擊，直到合適的圖像進入視圖。」

我認爲簡單的解決方案是利用jQuery的:animated selector，它可以讓你測試是否有一個動畫正在進行。所以，你可以這樣做：

$('#navs li').click(function() { 
    if ($(".slidingChartHolder").filter(":animated").length > 0) 
     return; 

    // your existing click code here 
}); 

另外，jQuery的動畫方法，讓你提供一次動畫完成後，將執行一個回調函數。所以當開始一個動畫時，你可以設置一個標誌來指示它正在進行，然後從回調中重置該標誌。然後單擊測試該標誌，如果動畫已在進行中，則不執行任何操作。所以你可以這樣做：

var allowClick = true; 

$('#navs li').click(function() { 
    if (!allowClick) 
     return; 

    // your existing click code here 
}); 

function moveMaster(leftEdge, newcs_current) { 
    allowClick = false; 
    $('.slidingChartHolder').fadeTo(200, .2).animate({ 
     left: leftEdge 
    }, "fast").fadeTo(200, 1, function() { 
     allowClick = true; 
    }); 

    // your existing add/remove class code here, noting that 
    // adding and removing classes doesn't happen on the animation queue 
}