javascript - 带有无限幻灯片放映的jQuery div(不间断，如《星球大战》)

我尝试在div文本中进行无限自动滚动（有点类似于星际大战的通用方式）。
当前的代码有效，但结果一点也不流畅。

我不明白为什么，并且我希望这一点保持流畅。

这是我的代码：

$(function(){
    setInterval(function(){
        $(".slideshow ul").animate({marginTop:-20}, 500, function(){
            $(this).css({marginTop:0}).find("li:last").after($(this).find("li:first"));
        })
    }, 500);
});

$(document).ready(function(){

	$(function(){
      	setInterval(function(){
         	$(".slideshow ul").animate({marginTop:-20}, 500, function(){
            	$(this).css({marginTop:0}).find("li:last").after($(this).find("li:first"));
        	})
      	}, 500);
   	});


    });

body {
  background: url(img/1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.head {
	width: 100%;
	height: 150px;
	text-align: center;
	background-color: rgba(255,255,255, 0.2);
}

.users {
	margin-top: 20px;
	padding-top: 20px;
	height: 400px;

	text-align: center;
	background-color: rgba(255,255,255, 0.2);

}

#suscrib {
	height: 45px;
	font-size: 15px !important;
}


.slideshow {

   width: 200px;
   height: 370px;
   overflow: hidden;
   /*border: 3px solid #F2F2F2;*/
}

.slideshow ul {
    /* 4 images donc 4 x 100% */
   width: 100%;
   height: 200px;
   padding:0; margin:0;
   list-style: none;
}
.slideshow li {
   color: red;
   font-family: 'Satisfy';

   font-size: 15px;
}


.thanks {
	margin-top: 20px;
	text-align: center;
	font-family: 'Dancing Script';
	font-size: 40px;
	color: red;
}

#ombre {
	box-shadow: 3px 3px 43px #000 !important;
}

h1 {
	padding-top: 80px;
	opacity: 1 !important;
	z-index: 10;
}

#logo {
	height: 150px;
	width: 150px;
	margin-top: 0px;
}

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>



	<body>



			<div class="row">
    			<div class="users col-lg-2 col-lg-offset-5" id="ombre">
    				<div class="slideshow col-lg-12 ">
	    				<ul id="pushme">
              <li> <div id='suscrib'> User user  </div>  </li>
              <li> <div id='suscrib'> User user2  </div>  </li>
              <li> <div id='suscrib'> User user3  </div>  </li>
                          <li> <div id='suscrib'> User user4  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
                          <li> <div id='suscrib'> User user  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
                          <li> <div id='suscrib'> User user10  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
              <li> <div id='suscrib'> User user  </div>  </li>
	    				</ul>
	    			</div>

    			</div>
			</div>
		</div>
	</body>
</html>

编辑：检查新代码段
非常感谢！

最佳答案

因此，这里有些错误。

动画不稳定的原因＃1是因为您没有指定缓动，所以jQuery使用了默认的“ swing”设置。您想要的是“线性的”，因为您根本不需要放松，您希望它像《星球大战》中的文字一样以稳定的速度连续向上滚动。
原因＃2动画是生涩的，是因为您将动画设置为20px，而“抄写”元素的高度为45px。因此，您只是将动画设置为一半，然后将其跳回0。
您有多个DIV，其ID为“ suscrib”。在文档中，给定id的唯一元素不应超过一个，而应使用类。

$(document).ready(function(){

	$(function(){
      	setInterval(function(){
         	$(".slideshow ul").animate({marginTop:-45}, 2000, "linear", function(){
            	$(this).css({marginTop:0}).find("li:last").after($(this).find("li:first"));
        	})
      	}, 2000);
   	});


    });

body {
  background: url(img/1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.head {
	width: 100%;
	height: 150px;
	text-align: center;
	background-color: rgba(255,255,255, 0.2);
}

.users {
	margin-top: 20px;
	padding-top: 20px;
	height: 400px;

	text-align: center;
	background-color: rgba(255,255,255, 0.2);

}

.suscrib {
	height: 45px;
	font-size: 15px !important;
}


.slideshow {

   width: 200px;
   height: 370px;
   overflow: hidden;
   /*border: 3px solid #F2F2F2;*/
}

.slideshow ul {
    /* 4 images donc 4 x 100% */
   width: 100%;
   height: 200px;
   padding:0; margin:0;
   list-style: none;
}
.slideshow li {
   color: red;
   font-family: 'Satisfy';

   font-size: 15px;
}


.thanks {
	margin-top: 20px;
	text-align: center;
	font-family: 'Dancing Script';
	font-size: 40px;
	color: red;
}

#ombre {
	box-shadow: 3px 3px 43px #000 !important;
}

h1 {
	padding-top: 80px;
	opacity: 1 !important;
	z-index: 10;
}

#logo {
	height: 150px;
	width: 150px;
	margin-top: 0px;
}

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>



	<body>



			<div class="row">
    			<div class="users col-lg-2 col-lg-offset-5" id="ombre">
    				<div class="slideshow col-lg-12 ">
	    				<ul id="pushme">
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user2  </div>  </li>
              <li> <div class='suscrib'> User user3  </div>  </li>
              <li> <div class='suscrib'> User user4  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user10  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
              <li> <div class='suscrib'> User user  </div>  </li>
	    				</ul>
	    			</div>

    			</div>
			</div>
		</div>
	</body>
</html>