停止一个事件，并在动画完成后恢复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 
}