Question

无法理解我的错误..请帮助弄清楚为什么动画的回调会多次触发。

下面的代码从上到下滚动文本块。动画的“步骤”移动自定义滚动条...

currentText.stop().animate({
                top: "-"+textHeight+"px"}, 
                {   
                    duration: durationOfAutoScroll, 
                    step: function(currentTop) {  
                        var positionY = currentTop;
                        if (positionY < curState.maskHeight - curState.textHeight) positionY = curState.maskHeight - curState.textHeight;
                        if (positionY > 0) positionY = 0;
                        var scrollPosition = -positionY * curState.scrollHeight / (curState.textHeight - curState.maskHeight);
                        curState.scrollerTop = scrollPosition;
                        $(".news-text .scroll-bar .scroller").css("top", scrollPosition);
                    },
                    complete: function() {
                        //jQuery.dequeue(currentText);
                        currentText.attr("data-state", 0);
                        onEndScroll();
                }
            }
            );

Answer 1

这意味着您的集合（ currentText ）具有5元素，每个元素都会触发一次回调，这是预期的行为。

如果这不是您想要的，您可以创建一个promise对象并使用done方法：

currentText.stop().animate({
    top: "..."
}, {
    duration: '...',
    step: function () {
      // ...
    },
}).promise().done(function () {
    // done
});

jQuery动画触发。完整回调5次

1 个答案: