jqueryscrolljquery-animate

jquery how to stop animation if last element reached


I have a horizontal scroller.
How to stop animations when last element reached?

Using offset? width? position?...

How to achieve to stop any animation if there is no more elements to display? But allowing to go back?

I have two buttons: PREV and NEXT; this buttons allow the user to view pages. There are 7 pages starting from page 4.

Thanks in advance

DEMO

$('#page_holder').animate({left: '-=546px'}, 0);

$('.prev').click(function(){
    $('#page_holder').animate(
    {left: '+=182px'},{
    duration: 1000, 
    easing: 'easeOutBack'
    });
});

$('.next').click(function(){
    $('#page_holder').animate(
    {left: '-=182px' },{
    duration: 1000, 
    easing: 'easeOutBack'
    });
});

Solution

  • Since there's already an overflow-hidden, parent we can change it's scrollLeft position:

    fiddle demo

    var $par = $('#container').scrollLeft(546) ; // Get the element that has CSS overflow
                                                 // and set to initial position
    $('.prev, .next').click(function( e ) {
        e.preventDefault();                      // Prevent default Anchors behavior
        var n = $(this).hasClass("next") ? "+=182" : "-=182"; // Direction
        $par.stop().animate({scrollLeft: n});
    });