jQuery的滑塊意外跳

Question

我有這樣的腳本：

<div style="position:relative ;overflow:hidden ; height:195px;"> 
    <div style="position:absolute" class="scroll"> 
    {foreach from=$announce_list item=a} 
     <div> 
     <img src="imgsize.php?w=214&h=100&img=../uploads/announce/{$a.--------}.jpg" /> 
     <h4 dir="rtl" style="padding-top:10px; padding-bottom:5px;">{$a.------}</h4> 
     <p dir="rtl" style="text-align:justify ;line-height:17px;">{$a.---------|truncate:"300":"..." }</p> 
     </div> 
    {/foreach} 
    </div> 
</div> 
{literal} 
    <script> 
     $(function(){ 
      function change_announce() 
      { 
       console.log('asdasdasd'); 
       var Scroll = $('.scroll') ; 
       Scroll.children('div:first').animate({marginTop:'-195px' } , 1000 , 
       function(){ 
        Scroll.children('div:first').appendTo(Scroll).css('marginTop' , '0px').fadeIn(2000); 
       } 
       ); 

      } 
      setInterval(change_announce , 3000) ; 
     }); 
    </script> 
{/literal} 

在此頁面的網站www.mahestan.ac.ir的右窗格中此演示動畫是不是第二個div後隱藏在接下來的div完全執行不完整動畫廣告突然跳躍發生！

Answer 1

更新：在進一步檢查你的代碼時，我發現了跳躍的原因。在動畫中，您正在滾動DIV到-195px，這是.scroll div的高度。

但是，您有padding-top:10px和padding-bottom:5px需要考慮。因此，您需要將-15px添加到總數爲-210px而非-195px的數字中。

改變這一行：

Scroll.children('div:first').animate({marginTop:'-195px' } , 1000 , 

要：

Scroll.children('div:first').animate({marginTop:'-210px' } , 1000,