sauts jQuery curseur de façon inattendue

Question

J'ai ce script:

<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} 

Sur cette page dans le volet droit du site www.mahestan.ac.ir dans cette démonstration de l'animation est pas complètement exécutée après la deuxième div est caché le prochain div ne se termine pas l'annonce d'animation un saut soudain se produit!

Answer 1

MISE À JOUR: Sur une inspection plus poussée de votre code, je trouve que la raison pour le petit saut. Dans l'animation, vous faites défiler la DIV à la position -195px qui est la hauteur de la div .scroll. Cependant, vous avez padding-top:10px et padding-bottom:5px pour prendre en compte. Pour cette raison, vous devez ajouter -15px au nombre pour un total de -210px au lieu de -195px.

Modifier cette ligne:

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

Pour:

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