jquery - TweenLite - 添加比指定更多像素的动画

Question

我正在创建一个由 4 个部分组成的垂直轮播。我有一个设置为窗口的整个高度和宽度的外包装，以及一个绝对位于该外包装内的内包装。

我试图在鼠标滚轮滚动时为其设置动画，但它添加了太多像素？

这是鼠标滚轮事件的代码:(我使用的是滚动插件)

$('.carousel-outer-wrapper').on('mousewheel', function(event) {
        var carousel = $('.carousel-wrapper');
        TweenLite.to(carousel, 1, {top: "+=50px"});
    });

我希望它在我滚动滚轮时只增加 50 像素，但它总是增加更多(50 像素到 73 像素之间的任何随机数)。事实上，数字不是 50 的倍数也表明鼠标滚轮滚动不仅仅是运行了太多次。

如何确保轮播仅精确滑动 50 像素？

Answer 1

我找到了解决问题的方法。

它没有解释为什么动画添加了不是 50 的倍数的额外像素，但它确实阻止了 slider 多次运行该函数。

我将我的代码更改为以下，现在它可以工作了:

    var blockedSlider = false;

    $('.carousel-outer-wrapper').on('mousewheel', function(event) {
        if (blockedSlider == false) {
            blockedSlider = true;
            var carousel = $('.carousel-wrapper');
            TweenLite.to(carousel, 1, {top: "-=50px", onComplete:function() {               
                blockedSlider = false;
            }});            
        }
    });