javascript - .animate() - 如何更改正在进行的动画结束？

Question

目标:使用 PageUp 和 PageDown 键平滑滚动窗口。

• 按 1 次:页面滚动 1 个单位。
• n 次快速按下:页面滚动 n 个单位。

让单位 = 160px。

我按PageDown。页面开始滚动到 160 像素，假设现在是 90 像素，同时我再次按 PageDown。很明显我不想在这里停止动画，我想将其目标帧更改为指向 320px!所以它实际上应该加速并且不会停止，直到页面滚动到 320px。

对我来说，显然我所要做的就是将 step 函数中的 tween 对象更改为 .animate() 方法，如下所示论证。

我连接了第二个 keydown 来修改 tween.end 属性，但它不起作用。动画只是断断续续地停止了。运动始终在第一个单位结束。

x.stop().animate(...) 方法是“不”的。更多的小问题 - Not Acceptable 。必须有一种方法可以在过程中更改动画结束，而不会停止动画、减慢动画速度或出现任何其他不需要的工件。

好的，这是代码:

var isScrolling = false;
var scrollStartPosition = 0;
var scrollTargetPosition = 0;

function goTo(position) {
    if (isScrolling) {
        scrollTargetPosition = position;
        goToUpdate();
    }
    else {
        scrollStartPosition = scrollTargetPosition = position;
        position = position >= 0 ? (position <= pageEnd ? position : pageEnd) : 0;
        $(page).animate({ scrollLeft : scroll = position }, { start: goToStart, step : goToStep, complete : goToComplete, duration : 500 });
    }
}

function goToStart(arg) {
    isScrolling = true;
}

function goToUpdate() {
    // ???
}

function goToStep(n, tween) {
    isScrolling = true;
    if (scrollTargetPosition !== scrollStartPosition) {
        scrollStartPosition = tween.end = scrollTargetPosition;
    }
}

function goToComplete(arg) {
    isScrolling = false;
}

请帮忙:)我已经浪费了大约 8 个小时来尝试这个，但没有运气。 jQuery.animate() 似乎完全忽略了任何更改正在进行的动画的尝试，我成功做的唯一一件事就是停止并重新启动它。我还设法对后续移动进行排队，但总移动只是 FUGLY n 次跳跃，而不是一次正常移动。

Answer 1

我刚刚描述了如何免费执行此操作；)它实际上按预期工作，我错过了 position 参数计算中的一个非常丑陋的错误。它只是不会随着按键而改变。

这是固定的 goTo() 函数:

function goTo(position) {
    if (isScrolling) {
        scroll = scrollTargetPosition = position;
        goToUpdate();
    }
    else {
        scrollStartPosition = scrollTargetPosition = position;
        position = position >= 0 ? (position <= pageEnd ? position : pageEnd) : 0;
        $(page).animate({ scrollLeft : scroll = position }, { start: goToStart, step : goToStep, complete : goToComplete, duration : 500, queue : false });
    }
}

唯一的区别是滚动变量(在其他地方定义)在注册事件后设置为新位置。

现在效果很好。

顺便说一句，如果我们想在不破坏可访问性的情况下使用这种效果 - 应该首先满足一些条件来激活它。在我的代码中检查屏幕分辨率。如果宽度超过 1280 像素 - 我会激活特殊的动画 View 。

所以，这是完整的解决方案:

// create a very wide page
// include jQuery and this...

var page;
var pageEnd;
var scroll;
var scrollStep = 160;
var isScrolling = false;
var scrollStartPosition = 0;
var scrollTargetPosition = 0;

function goTo(position) {
    if (isScrolling) {
        scroll = scrollTargetPosition = position;
    }
    else {
        scrollStartPosition = scrollTargetPosition = position;
        position = position >= 0 ? (position <= pageEnd ? position : pageEnd) : 0;
        $(page).animate({ scrollLeft : scroll = position }, { start: goToStart, step : goToStep, complete : goToComplete, duration : 500, queue : false });
    }
}

function goToStart(arg) {
    isScrolling = true;

}

function goToStep(n, tween) {
    isScrolling = true;
    if (scrollTargetPosition !== scrollStartPosition) {
        scrollStartPosition = tween.end = scrollTargetPosition;
    }
}

function goToComplete(arg) {
    isScrolling = false;
}

function keyDown(e) {
    var handled = true;
    switch (e.which) {
        case 33:
        case 38:
            goTo(scroll - scrollStep);
            break;
        case 34:
        case 40:
            goTo(scroll + scrollStep);
            break;
        case 35:
            goTo(pageEnd);
            break;
        case 36:
            goTo(0);
            break;
        default:
            handled = false;
            break;
    }
    if (handled) e.preventDefault();
}

function init() {
    page = $('body');
    pageEnd = page[0].scrollWidth - page[0].clientWidth;
    page.scrollLeft(1);
    if (page.scrollLeft() < 1) page = $('html');
    goTo(0);
    $('html').css({
        'overflow-x' : 'scroll',
        'overflow-y' : 'hidden'
    });
    scroll = page.scrollLeft();
    $(window).keydown(keyDown);
}

$(init);