javascript - How reverse animations made with scrollTop(); -
function firstanimation() { $('.etc(1)').fadein(); } function secondanimation() { $('.etc(1)').fadeout(); $('.etc(2)').fadein(); } function thirdanimation() { $('.etc(2)').fadeout(); $('.etc(3)').fadein(); } function fourthanimation() { $('.etc(3)').fadeout(); $('.etc(4)').fadein(); } $(window).scroll(function() { if ($(this).scrolltop() > 150) { firstanimation(); } if ($(this).scrolltop() > 300) { secondanimation(); } if ($(this).scrolltop() > 450) { thirdanimation(); } if ($(this).scrolltop() > 600) { fourthanimation(); } }); guys, i'm using scrolltop() animate piece of site, , wondering if can reverse animation if o scroll bottom, , not top.
i searching there isn't scrollbottom in jquery.
first, set additional requirement each if statement condition each event scroll range prevent multiple events being triggered. second, add .fadeout() function next elements effect reversed when user scrolls opposite direction.
the code should like:
function firstanimation() { $('.etc1').fadein(); $('.etc2').fadeout(); } function secondanimation() { $('.etc1').fadeout(); $('.etc2').fadein(); $('.etc3').fadeout(); } function thirdanimation() { $('.etc2').fadeout(); $('.etc3').fadein(); $('.etc4').fadeout(); } function fourthanimation() { $('.etc3').fadeout(); $('.etc4').fadein(); } $(window).scroll(function() { if ($(this).scrolltop() > 1500 && $(this).scrolltop() < 3000) { firstanimation(); } if ($(this).scrolltop() > 3000 && $(this).scrolltop() < 4500) { secondanimation(); } if ($(this).scrolltop() > 4500 && $(this).scrolltop() < 6000) { thirdanimation(); } if ($(this).scrolltop() > 6000) { fourthanimation(); } });