CODEWITHSUNDEEP
jqueryjquery-animate
mehdi
mehdi

Reputation: 9502

jQuery Slider jumps unexpectedly

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!

Upvotes: 0

Views: 197

Answers (1)

Jose Basilio
Jose Basilio

Reputation: 51538

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,

Upvotes: 1

Related Questions