jQuery滚动一行停顿效果

直接上代码吧

<style>
html{margin:0 auto; padding:0;}
div,ul,ol,li{margin:0;padding:0;font-weight:normal;}
ul,ol,li,i{list-style:none; font-style:normal;}
.z{float:left;}
.y{float:right;}

a{color:#333333; text-decoration:none; outline:none;}
a:hover{color:#e8450a; text-decoration:underline; outline:none;}

/* site-topbar
------------------------------------------------------*/
.site-topbar{width:100%; margin:0 auto; height:40px; line-height:40px; z-index:30; color:#b0b0b0; background:#333}
.site-topbar a{color:#b0b0b0; text-decoration:none}
.site-topbar a:hover{color:#fff;}

.site-topbar #index-msg-box {height:40px; line-height:40px; overflow:hidden; padding:0 10px;}
.site-topbar i{line-height:40px;padding-right:8px;}
.site-topbar .ann_box{margin-left:20px;}
.site-topbar .ann_box li{height:40px; line-height:40px; overflow:hidden;}

#top-user-info ul{padding:0px; margin:0px;}
#top-user-info ul li{float:left; padding:0 0 0 5px;}
</style>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
	function autoScroll(obj){
		$(obj).find(".ann_box_list").animate({
			marginTop : "-35px"
		},500,function(){
			$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
		})
	}
	$(function(){
		setInterval('autoScroll(".ann_box")',3000)
	});
</script>
<div class="site-topbar">
	<div class="container">
		<div class="z" id="index-msg-box">
			<i class="z ann_box_ico fa fa-volume-up"></i>
			<div class="ann_box">
				<ul class="ann_box_list">
					<li><a href="https://yangjunwei.com" target="_blank">你只闻到我的香水, 却没看到我的汗水</li>
					<li>Connecting People.</li>
					<li>你有你的规则，我有我的选择</li>
				</ul>
			</div>
		</div>
	</div>
</div>

有兴趣的可以看一下示例：Demo演示