jQuery Slider springt unerwartet

Question

Ich habe dieses Skript:

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

Auf dieser Seite in der rechten Fensterbereich der Website www.mahestan.ac.ir in dieser Demonstration die Animation nach dem zweiten div das nächste div ein plötzlicher Sprung auftritt nicht vervollständigt die Animation Anzeige nicht vollständig ausgeführt versteckt!

Answer 1

UPDATE: Bei der weiteren Überprüfung des Codes, fand ich, dass der Grund für den kleinen Sprung. In der Animation, scrollen Sie die DIV -195px zu positionieren, die die Höhe des .scroll div ist.

Sie haben jedoch padding-top:10px und padding-bottom:5px zu berücksichtigen. Aus diesem Grund müssen Sie -15px auf die Zahl für insgesamt -210px statt -195px hinzuzufügen.

diese Zeile ändern:

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

An:

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