Question

我有一个包含Jquery动画的click事件。如何在触发多个单击事件时保证动画已完成。

$(this._ScrollBarTrack).click(function(e) {
         if(e.target === this && _self._horizontalClickScrollingFlag === false){
        _self._horizontalClickScrollingFlag = true;
        if(_self._isVertical){

        } else{ //horizontal

            if(e.offsetX > (this.firstChild.offsetWidth + this.firstChild.offsetLeft)){ // Moving Towards Right
                var scrollableAmountToMove = _self._arrayOfCellSizes[_self._scrollBarCurrentStep + 1]; // additional amount to move
                var scrollableCurrentPosition = -($(_self._bodyScrollable).position().left);
                var scrollBarCurrentPosition = $(_self._ScrollBarTrackPiece).position().left;
                var scrollBarAmountToMove  = _self.getScrollBarTrackPiecePositionBasedOnScrollablePosition(scrollableAmountToMove);
                $(".event-scroll-horizontally").animate({left:-(scrollableCurrentPosition+ scrollableAmountToMove)});
                $(_self._ScrollBarTrackPiece).animate({left: (scrollBarCurrentPosition + scrollBarAmountToMove)});
                _self._scrollBarCurrentStep += 1;
            } else{
                var scrollableAmountToMove = _self._arrayOfCellSizes[_self._scrollBarCurrentStep - 1]; // additional amount to move
                var scrollableCurrentPosition = -($(_self._bodyScrollable).position().left);
                var scrollBarCurrentPosition = $(_self._ScrollBarTrackPiece).position().left;
                var scrollBarAmountToMove  = _self.getScrollBarTrackPiecePositionBasedOnScrollablePosition(scrollableAmountToMove);
                $(".event-scroll-horizontally").animate({left:-(scrollableCurrentPosition - scrollableAmountToMove)});
                $(_self._ScrollBarTrackPiece).animate({left: (scrollBarCurrentPosition - scrollBarAmountToMove)});
                _self._scrollBarCurrentStep -= 1;
            }
        }
        _self._horizontalClickScrollingFlag = false;
    }
});

Answer 1

jQuery有一个隐藏的（我不确定为什么它不在某个地方的文档中）变量$.timers，你可以测试。

我很久以前就做过这个功能来处理这样的情况。请注意，这将测试以确保当前没有动画正在执行。

function animationsTest (callback) {
    var testAnimationInterval = setInterval(function () {

        if ($.timers.length === 0) { // any page animations finished
            clearInterval(testAnimationInterval);
            callback(); // callback function
        }
    }, 25);
};

用法： jsFiddle DEMO

animationsTest(function () { 
    /* your code here will run when no animations are occuring */ 
});

如果你想单独测试一个，你可以做一个类/数据路由。

$('#thing').addClass('animating').animate({ left: '+=100px' }, function () { 
    // your callback when the animation is finished
    $(this).removeClass('animating');
});

Answer 2

您可以声明一个名为isAnimating的全局布尔值，并在开始动画时将其设置为true。然后将done或complete函数添加到动画中，并将其设置回false。然后将点击事件设置为仅在isAnimating为false时开始动画。

如何使用jquery动画处理多次调用的click事件？

2 个答案: