Question

我有两个解决方案。第一个使用方法animate：

http://jsfiddle.net/g9aK8/3/

问题是延迟，当我们暂停计时器例如400px并恢复然后我们必须再次等待所有延迟（杆的速度绝对更低）。

在第二个解决方案中，我使用了interval：

http://jsfiddle.net/6wNcd/1/

它看起来更好，但是当我尝试在几分钟后停止此操作时，我不得不等待大约30秒然后停止。我不确定在interval使用这个小值是否正确。

你有什么想法这么聪明吗？

Answer 1

尝试这个jquery代码我测试了它并且它工作正常

$('#button').hover(function() {
    $(this).text('pause');
    $('#bar').stop();
}, function() {
    $(this).text('play');
    var w=$('#bar').css('width');
    var val=parseInt((6000*(500-parseInt(w))/500));
    $('#bar').animate({width: '500px'}, val, 'linear', function() {
        $('#bar').css('width', '0px');                      
    });
});

Answer 2

如果你的第一个例子，每当你重新开始动画时，你总是设置一个2秒的动画，即使只有几个像素的动画，因此它看起来很慢。如果您希望它在重新启动时以相同的速率继续，则必须缩放动画中剩余距离的时间。

这是第一个示例的固定版本，它根据剩余时间来缩放时间：

$('#button').click(function() {
    if($(this).text() == 'play') {
        $(this).text('pause');
        var box$ = $('#box');
        var left = parseInt(box$.css("left"), 10) || 0;
        box$.animate({ left:'150px' }, 2000 * ((150 - left) / 150), 'linear');
    }
    else {
        $(this).text('play')
        $('#box').stop();
    }
})

您可以在此处查看：http://jsfiddle.net/jfriend00/TVg7x/

从你的两个选项中，我会选择第一个版本，因为第二个版本会使间隔计时器运行，即使动画停止时这对CPU利用率来说也不是一个好主意，尤其是在移动设备上。

在jQuery中停止并恢复计时器

2 个答案: