頁面消息提示，上下滾動

HTML部分：

                            <%--放置上下滾動的消息--%>
                            <div class="messageWrap borderBox">
                                <div class="message borderBox">
                                    <ul id="notice">
                                        <li class="text-ellipsis">這是一條消息0</li>
                                        <li class="text-ellipsis">這是一條消息1</li>
                                        <li class="text-ellipsis">這是一條消息2</li>
                                    </ul>
                                </div>
                            </div>

css部分：

/* ============關於滾動消息的樣式===========*/
.messageWrap{
  position:absolute;
  bottom:0;
  height:0.64rem;
  width:100%;
  padding:0 0.2rem;
  overflow:hidden;
}
.message{
  width:100%;
  background:#fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  height:100%;
  overflow:hidden;
  padding-left:0.2rem;
}
.message li{
  line-height:0.64rem;
}
/*============關於滾動消息的樣式=============*/

js部分：

    //消息通知上下翻滾
    var num=$("#notice").find("li").length;
    if (num>1) {
        setInterval(function(){
            $('#notice').animate({
                marginTop:"-26px"
            },500,function(){
                $(this).css({marginTop : "0"}).find("li:first").appendTo(this);
            });
        }, 3000);
    }