Question

我有一个水平卷轴如何在最后一个元素到达时停止动画？

使用偏移量？宽度？位置？...

如果没有更多元素要显示，如何实现停止任何动画？但是允许回去？

我有两个按钮：PREV和NEXT;此按钮允许用户查看页面。共有7页从第4页开始。

提前致谢

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

Answer 1

以下是一个解决方案：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);
});

Answer 2

由于已经有overflow-hidden，我们可以将其更改为scrollLeft位置：

<强> 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.animate({scrollLeft: n});
});

jquery如果到达最后一个元素，如何停止动画

2 个答案: