jQuery_animate的一个简单实用的效果

之前在做项目时碰见原网站要求滚动到一定高度出现元素,我首先想到的是jQuery中的hide与fadein,sildeup结合,但是这样会有一个不理想的效果,当页面再次滚动到固定位置之上时,元素会再次消失,会非常影响体验和观感,于是我想到了另一个函数----animate

if($(window).scrollTop() > 120 ){
                $("#tp").animate({top:'0px'},1000);
                $("#firstarticle").animate({top:'-85px'},1000);
                $("#acticle-left").animate({top:'-80px'},1000);
                $("#acticle-right").animate({top:'-380px'},1000);

            }

当滚动条在120行之下时,""中选择到的id元素会执行animate动画函数,top值由初始位置移动到可选位置,这个移动过程将由一个动画来呈现,后面的数字是时间单位毫秒.

想让这个函数达到我们预期的实现效果仅仅靠一个jQuery函数可不够,还要在前端css中将动画选定的元素移动到它的父元素之外,并给父元素一个overflow:hidden,将移动出去的子元素变消失.

然后再由这个jQuery函数来实现自下而上的平移动画.