如何将动画逆转经过一个滚动点?

时间:2019-05-08 19:49:10

标签: jquery animation scroll

我的温度表在滚动点上升。在滚动超过该点或向上滚动时,我需要它返回到其原始点。我正在使用jQuery来做到这一点。我可以使温度上升,但不能使温度下降。

在滚动点上执行的指定的单独功能。该警报使我知道我在哪里,但该功能无法执行。温度仍然很高。

var position = $(window).scrollTop();
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();
            if(scroll > position) { 
                if ($(window).scrollTop() > 2900 && $(window).scrollTop() < 4500){
                    risingTemp();
                    return;
                }
            } 
            else { 
                if ($(window).scrollTop() > 5200){
                    fallingTemp();
                    return;
                }
            }
            position = scroll;
        }); 


function risingTemp() {$('#thermometer').animate({'height': '380px', 'margin-top': '-380px'}, 5000);} //works

function fallingTemp() {$('#thermometer').animate({'height': '50px', 'margin-top': '-50px'}, 500);} //original height and margin. Doesn't work

我希望温度相应地升高和降低:

在向下滚动2900px和4500px(包装div顶部和底部的视口)之间,温度升高。

滚动经过div或向上滚动后(温度回落到原始设置。

0 个答案:

没有答案