jQuery Slider jumps unexpectedly

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 the animation is not completely executed after second div is hidden the next div doesn't complete the animation ad a sudden jump occurs!

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,