WEB前端初学者笔记（19）--jQuery中的animate（）方法

一.定义

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

二.语法

(selector).animate({styles},speed,easing,callback)

三.实例

例如页面中，当我们滑到指定位置的时候，页面的元素会从一个地方蹦出来，这种效果我们就可以使用animate元素来实现。

代码如下

<script>

    $(function(){
        var div_height = $(".fade").offset().top;
        console.log(h3_height)
        $(window).scroll(function(){
            var this_scrollTop = $(this).scrollTop();
            if(this_scrollTop<410 ){
                $("#fade1").animate({top:'0px'},1000,"linear");
                $("#fade2").animate({top:'0px'},1400,"linear");
                $("#fade3").animate({top:'0px'},1800,"linear");
                $("#fade4").animate({top:'0px'},2200,"linear");
                $("#fade5").animate({top:'0px'},2600,"linear");

            }
            console.log(this_scrollTop)
        });
    });
</script>

解析：

1.我们先用offset().top方法来获取元素距离页面顶端的距离，再用$(this).scrollTop()获取滚动条距离页面顶端的距离，

2.当$(this).scrollTop()<offset().top的时候，就说明元素已经进入到需要展示的地方了，这时候就开始执行animate函数

3.将小盒子定位到想让小盒子出来的方向，一定要在大盒子外面。再给大盒子定义一个ovrflow：hidden来隐藏子元素，然后触发animate的时候小盒子就会执行animate里面的定义，让他们的速度错开，就能实现一个接一个跳出来的效果。

4.这样函数只执行一次，不会反复实现，