jq实现表格轮播滚动——技能提升

今天在做电视机的项目，除了单位要转为自适应的rem之外，还有一个点就是表格要实现轮播。

 效果图如上，表格中是一条条的数据，需要实现表格中的数据向上滚动，每次滚动的就是一行数据的高度。

我的jq技能几乎忘光了，下面是附录代码：

setInterval(timerFn,3000);
function timerFn() {
    var scrollHeight = $(".order-table").find("tr").outerHeight();
    $(".order-table").animate({
            marginTop: -scrollHeight,
        },
        500,
        function() {
            $(this)
                .css({
                    marginTop: "0px",
                })
                .find("tr:first")
                .appendTo(this);
        }
    );
}

上面代码中的order-table就是表格外层的div的class名称，可以拿到这个表格中的tr的高度，也就是上面代码中的outerHeight()，这个就是要滚动的距离，

然后给表格添加一个animate动画。animate的动画有三个参数，

   第一个参数就是要变化的参数及数值， 

   第二个参数是动画的时间，

   第三个参数是动画结束时的回调函数。

变化的量就是：marginTop，变化的数值是当前表格中第一个tr的高度。

动画的时间可以设置为500，

回调函数这个地方需要注意下：

      为了保证表格不间断，动画完的tr要放到表格的最下方，也就是:appendTo，最后保证表格能够持续轮播。

完成！！！