Question

我正在使用工具提示开发一个距离的伪时间轴，该工具提示遵循时间轴到新的标记位置。

 |--------- 800px ------|------------------- 1200px ----------- |
 A (5000km)             B (20000km)                             C (30000km)

在标记A（5000km）和标记B之间是15000km的虚假差异，但时间线上元素之间的实际距离是800px。我使用计数器为指示器设置动画，该计数器在12秒的范围内沿着这两个点移动。动画很简单，但我无法计算出计数器间隔，因此它从5000开始，到12秒时间结束时以20000结束。

这就是我所拥有的，但是计数器在动画背后完成，因为我无法解决增量值。

var ttl = 12*1000,
    startKM = 5000,
    endKM = 15000,
    diffDist = endKM-startKM,
    distanceLoop,
    txt = $('.counter').text();
    increment = diffDist/ttl;

$('.counter').text(startKM);

$('.indicator').animate({ left: $('.markB').offset().left }, ttl, 'linear', function() {
    clearInterval(distanceLoop);
});

function counterLoop() {

    var num = txt++;
    // what is the count interval 
    // var num = txt + increment
    $('.counter').text(num);
};

distanceLoop = setInterval(counterLoop, diffDist/ttl )

counterLoop();

我不知道增量是多少，所以现在只有+1到柜台。这可能是基本的，我只是没有看到。

感谢您的帮助！

演示/小提琴：http://jsfiddle.net/7xygy/10/

Answer 1

您可以使用step功能的.animate()选项，而不是setInterval。

var startKM = 5000,
    endKM = 15000;

var startLeft = $('.indicator').offset().left,
    endLeft = $('.markB').offset().left,
    ratio = (endKM - startKM) / (endLeft - startLeft);

$('.counter').text(startKM);
$('.indicator').animate({ left: endLeft }, {
    easing: 'linear',
    duration: 12000,
    step: function(now) {
        $('.counter').text(Math.floor(startKM + ((now - startLeft) * ratio)));
    },
    complete: function() {
        $('.counter').text(endKM);
    }
});

jsfiddle

setInterval计数器与jQuery动画

1 个答案: