让一个一个出现的实现从下向上升的效果

最新推荐文章于 2023-09-19 10:20:09 发布

weixin_30751947

最新推荐文章于 2023-09-19 10:20:09 发布

阅读量124

点赞数

原文链接：http://www.cnblogs.com/mina-huojian66/p/8028895.html

版权

遍历延迟插入，从最下面出现，实现向上升的效果，到原本的位置停止

$.ajax({
    url: "./equpment/lastInfo",//请求数据
    dataType: 'json',
    success: function (results) {
        var top=0;
        $(results).each(function(index,car){
            var li='<li style="bottom:0;position:absolute;">Id为'+car.equpid+'的车辆'+car.equpname+'在'+car.gps_date+'耕作了'+parseFloat(car.area/666.6667).toFixed(2)+'亩地</li>'; //让li出现在最下面
            setTimeout(function () {
                if(index==0){
                    top=0;
                }else{
                    top+=40;
                }
                $('#ul').append(li);//插入ul
                $("#ul li:last").animate({top:top},8000);//让第一个li在8秒内top为40，让第二个li在8秒内top为80；
            }, index*1000);//一秒出现一个li
        });
    }
});