为什么动画无法在我的滑块中正常播放？

Question

I have a jQuery simple slider it has 15 picture each five show in a slide. I have a previous button and next button.

Each next click generate a left movement by 855px with a slider animation. Each previous click generate a right movement by 855px with a slider animation.

This is my jQuery code :

$(document).ready(function(){
    $(".prev_button").click(function(){
        $("ul.slider").animate({
            left: "+=855"
        }, 3000, function(){
            $("ul.slider").css('left', '0');
            li_no = 0;
            $("ul.slider").find("li").each(function(){
                li_no = li_no + 1;
            });
            slide_after_this = li_no - 6;
            $('ul.slider li:gt('+slide_after_this+')').prependTo('ul.slider'); // << line changed
        });
    });

    $(".next_button").click(function(){
        //alert($("ul.slider").css("right"));
        $("ul.slider").animate({
            right: "+=855"
        }, 3000, function(){
        //alert($("ul.slider").css("right"));
            $("ul.slider").css('right', '0');
            $('ul.slider li:not(:nth-child(n+6))').appendTo('ul.slider');
        });
    });
});

Now I have two problems :

First one is with the previous button (left arrow) When I click it the animation shows and the elements changed but they do not wrapped with each other (I mean does not show the last elements immidiatly before the first element). I can not find the reason of this.

Second problem is with both right and left arrows it is like following :

If I click just the right arrow the slider working fine it animates and change the elements but If I click the both button in order (I mean right then left or left then right ) the elements change but the animation does not show. but I check if the routine go inside the animate function by some alerts and it is going inside but does not animate on the screen .

This is a link that may help you:

http://jsfiddle.net/mpx83tpv/18/

Answer 1

you are really close try overflow:hidden for .slider_container

div.slider_container
{
    height:380px;
    width:855px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}

edit js:

also use below code as you are using both right and left in the end the slider has both of them one of them is always zero.

$(document).ready(function(){
    $(".prev_button").click(function(){
        $("ul.slider").animate({
            left: "+=855"
        }, 3000);
    });

    $(".next_button").click(function(){
        //alert($("ul.slider").css("right"));
        $("ul.slider").animate({
            left: "-=855"
        }, 3000);
    });
});

if you want a infinite scrolling you need to use right and left in this case replace your $("ul.slider").css('right', '0'); line to $("ul.slider").css('right', ''); do same for left as well, as you need the remove them.

for adding the next visible div implement you logic before the animation as you callbacks do it after the animation.

the tricky part would be the prev button for this after calculation of the div count you also need the set new left without animation and then call left move animation.

hope these make sense.