Question

我正在开发基于this previous question的功能。

然而，如果滚动开始缓慢而快速加速会很好，但似乎不可能使用animate函数中的可用缓动，因为当用户按下下一个时，它会被多次触发/以前的按钮。

任何人都知道如何实现这个目标？

谢谢：）

现在使用JSFiddle：http://jsfiddle.net/4YJPG/4/

附加相关问题，如果时间轴div可以在宽度上动态更新，因为可变宽度的新项目被添加到右侧，一旦到达任一端，确保滚动可靠地停止的最佳方法是什么？

更新：JSFiddle用代码停止时间轴div滚动到两端（希望动态宽度）：http://jsfiddle.net/eFFKU/4/

Answer 1

这并不难。就这样做吧。在onClick（左/右）上绑定一个函数，如下所示

var val=5; 

setInterval(function() {
    val++;
}, 100);

并将' - + 10px'替换为val，以便它开始变慢并快速移动。您需要考虑的是将val转换为字符串并连接'px'并将限制值设为val ex：30

Answer 2

如果您更改元素的宽度或在时间轴中添加/删除一些新元素，此解决方案不会中断。

<强> Here is working jsFiddle.

var liWidth = $('#timeline ul li').outerWidth(true);
//this calculates element's width with their margins/paddings/borders
var liTotal = $('#timeline ul li').index()-9;
//need to descry first seen li's from calculation for true value of MaxRange
var MaxRange = ( liTotal  * liWidth ) * -1;

$('.prev').click(function(){
    var current = parseInt($('#timeline').css('right'));
    if ( current <= 0  && current > MaxRange ) {
        $timeline.stop(false,true).animate({'right':'-='+liWidth+'px'},1000);
    }
});

$('.next').click(function(){
    var current = parseInt($('#timeline').css('right'));
    if ( current <= -1 ) {
        $timeline.stop(false,true).animate({'right':'+='+liWidth+'px'},1000);
    }
});

如果你想做到这一点：你需要添加另一个if条件;当向左移动并向右移动按钮点击并且不同的值添加到$ timeline的右侧css时，此按钮将无法完美滑动。

你可以编写一个方程式，将当前右边的值除以50 / liWidth，如果它不可分，你可以重置时间轴而不是init next / prev函数。

通过缓动效果在控制下进行动画时左/右动画div

2 个答案: