Question

我搜索并发现了三个相当不错的帖子，但是所有这些都是在点击动画，而不是点击发送参数到动画的功能，因此既没有.stop（），stop（true，true）也没有event.stopPropagation（）尽管我可能会把它放在错误的位置。因此，我的问题。

我想要阻止的是（无论出于何种原因）点击快乐旋钮，它快速点击所有可用链接，然后快速点击第四个并拧紧用于计算滑块div / image应该在哪里的数学。一旦动画停止，图像就会偏离，所以我需要了解在哪里说“好的，点击了某些内容，在相应的图像进入视图之前不允许任何其他点击。”

同样，我正在尝试做的和我发现的不同之处在于动画调用不是直接在点击下发生，而是在点击进行了一些计算并将这些数字发送到不同的函数之后

我有这个：

 $('#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

我需要了解在哪里说“好的，点击了某些内容，在相应的图片进入视图之前不允许任何其他点击。” < / p>

我认为简单的解决方案是使用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
}

停止事件并在动画完成后使用Javascript / jQuery完成

1 个答案: