jQuery Slider Issue !

Question

I have This 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}

on this page in right pane of the site www.mahestan.ac.ir in this demonstration animation is not completlatly executed after second div hide next div dosen't complete animation a sudden jump occur !! :) i can't explain that very well sorry . Tank for Helping .

Answer 1

UPDATE: On further inspection of your code, I found that the reason for the little jump. In the animation, you are scrolling the DIV to position -195px which is the height of the .scroll div.

However, you have padding-top:10px and padding-bottom:5px to take into account. For this reason, you need to add -15px to the number for a total of -210px instead of -195px.

Change this line:

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

To:

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