CODEWITHSUNDEEP
jqueryscrolljquery-animate
Roko C. Buljan
Roko C. Buljan

Reputation: 206669

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'
    });
});

Upvotes: 1

Views: 1353

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

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

Upvotes: 0

mattsven
mattsven

Reputation: 23303

Here's one solution: http://jsfiddle.net/vkNg4/2/

var cur = 1;
var max = $(".page").length+1;

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

$('.ll').click(function(){
    if (cur-1 < 1) return;
    cur--;
    $('#page_holder').animate(
    {left: '+=182px'},{
    duration: 1000, 
    easing: 'easeOutBack'
    });
    alert(cur);
});


$('.rr').click(function(){
    if (cur+1 > max) return;
    cur++;
    $('#page_holder').animate(
    {left: '-=182px' },{
    duration: 1000, 
    easing: 'easeOutBack'
    });
    alert(cur);
});

Upvotes: 0

Related Questions