Question

我为我的照片博客实施了动画。我仍然有很大的问题，因为'body'元素正在激活动画两次。

我认为问题源于$（'body'）.animate。因为我认为当身体动画时，滚动事件将再次激活，从而触发事件两次。

我的代码问题是向上滚动页面。当我向上滚动页面时。 scrollAnimatePrev将触发，然后$（'body'）元素将自行设置动画。动画后，动画变量设置为false。但是$（'body'）元素会触发scroll事件，因为我想当我设置scrollTop时会触发scroll事件。所以再次将currentPos设置为$（窗口）.scrollTop（）然后currentPos＆gt; previousPos返回true并且！animating返回true，因此它将触发scrollAnimate。

现在我想解决这个问题。怎么样？

    $(function() {
        var record = 0;
        var imgHeight = $(".images").height();
        var offset = $(".images").eq(0).offset();
        var offsetHeight = offset.top;
        var previousPos = $(window).scrollTop();
        var animating = false;
        var state = 0;
        $(window).scroll(function() {
            var currentPos = $(window).scrollTop();
            console.log(currentPos);
            if(currentPos > previousPos && !animating) {
                record++;
                scrollAnimate(record, imgHeight, offsetHeight);
                animating = true;
            } else if (currentPos < previousPos && !animating) {
                record--
                scrollAnimatePrev(record, imgHeight, offsetHeight);
                animating = true;
            }
            previousPos = currentPos;
            console.log(previousPos)
        })


        function scrollAnimate(record, imgHeight, offsetHeight) {
            $('body').animate(
                {scrollTop: (parseInt(offsetHeight) * (record+1)) + (parseInt(imgHeight) * record)},
                1000,
                "easeInOutQuart"                    
            )
            .animate(
                {scrollTop: (parseInt(offsetHeight) * (record)) + (parseInt(imgHeight) * (record))},
                1000,
                "easeOutBounce",
                function() {
                    animating = false;
                }
            )
        }

        function scrollAnimatePrev(record, imgHeight, offsetHeight) {
            $('body').animate(
                {scrollTop: ((parseInt(imgHeight) * record) + (parseInt(offsetHeight) * record)) - offsetHeight},
                1000,
                "easeInOutQuart"
            )
            .animate(
                {scrollTop: ((parseInt(imgHeight) * record) + (parseInt(offsetHeight) * record))},
                1000,
                "easeOutBounce",
                function() {
                    animating = false;
                }
            )
        }
    })

Answer 1

我认为它可能会两次触发回调。我最近遇到了类似的问题。

我有类似的东西

$('#id, #id2').animate({width: '200px'}, 100, function() { doSomethingOnceOnly(); })

它正在调用我的doSomethingOnceOnly()两次，我认为它必须是$参数中的双重选择器。我只是做了两个不同的选择器，它工作得很好。所以喜欢这个

$('#id').animate({width: '200px'}, 100);
$('#id2').animate({width: '200px'}, 100, function() { doSomethingOnceOnly(); );

Answer 2

使用标志来控制触发器对我来说很有用。

var targetOffset = 0;
var allow_trigger = true;
$('html,body').animate({scrollTop: targetOffset}, 'slow', function() {
    if (allow_trigger) {
        allow_trigger = false;
        doSomethingOnlyOnce();
    }
});

jQuery：'body'元素两次激活滚动事件

2 个答案: