jQuery實現消息列表循環垂直向上滾動

HTML代碼：

                <ul id="notice">
                    <li class="text-ellipsis">這是一條消息0</li>
                    <li class="text-ellipsis">這是一條消息1</li>
                    <li class="text-ellipsis">這是一條消息2</li>
                </ul>

jQuery代碼：

$(function () {
    movedome();
});

function movedome(){
        var margintop=0;//上邊距的偏移量
        var stop=false;
        setInterval(function(){
            if(stop==true){
                return;
            }
            $("#notice").children("li").first().animate({"margin-top":margintop--},0,function(){
                var $li=$(this);
                if(!$li.is(":animated")){//第一個li的動畫結束時
                    if(-margintop>$li.height()){
                        $li.css("margin-top","0px").appendTo($("#notice"));
                        margintop=0;
                    }
                }
            });
        },50);
        //鼠標放到快遞信息(ul)上時
        $("#notice").hover(function(){
            $(this).css("cursor","pointer");
            stop=true;//停止動畫
        },function(){
            stop=false;//開始動畫
        });
    }

 或者

        <style>
            .ul1{list-style: none;margin: 0}
            li{padding: 5px;}
        </style>
        <div style="background-color:pink; margin:15px 90px 0 90px;padding-left: 310px; height: 600px;">
            <div style="position: relative;height: 26px;overflow: hidden;">
                <ul class="ul1">
                    <li>K先生：我求求你嫁給我</li>
                    <li>K先生：等你老了，我依然背着你</li>
                    <li>K先生：我給你當拐杖</li>
                    <li>K先生：等你沒牙了，我就嚼碎了再喂給你吃</li>
                </ul>
<%--                <img style="position: absolute;top: 9px;left: 20px" width="15px" height="15px" src="laba.png">--%>
            </div>
        </div>

 

$(function () {
    var num=$(".ul1").find("li").length;
    console.log("直接運行"+num);
    if (num>1) {
        setInterval(function(){
            $('.ul1').animate({
                marginTop:"-26px"
            },500,function(){
                $(this).css({marginTop : "0"}).find("li:first").appendTo(this);
            });
        }, 3000);
    }
})