jQuery div 无限幻灯片放映（不间断，像星球大战）

Question

我尝试在 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>

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

Answer 1

所以，这里有几处错误。

动画不稳定的原因 #1 是因为您没有指定缓动，所以 jQuery 使用默认 "swing" 设置。你想要的是 "linear" 因为你根本不想缓动，你希望它像星球大战文本那样以稳定的速度连续向上滚动。
动画不稳定的原因 #2 是因为您将其动画化了 20 像素，而您的 "suscrib" 元素高了 45 像素。所以你只是在中途对其进行动画处理，然后将其跳回到 0。
您有多个 ID 为 "suscrib" 的 DIV。文档中具有给定 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>

jQuery div 无限幻灯片放映（不间断，像星球大战）

jQuery div with Infinite slide show (non stop, Like StarWars)

javascript

jquery

jquery-animate