Question

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

1按：页面滚动 1 单位。
n快速按：页面滚动 n 单位。

设单= 160px。

我按PageDown。页面开始滚动到160px，让我们现在说它是90px，而我再次按PageDown。很明显，我不想在这里停止动画，我想将它的目标框架更改为320px！所以它实际应该加速并且不停止，直到页面滚动到320px。

我觉得很明显，我所要做的就是将tween对象step中的.animate()对象改为keydown方法作为参数。

我连接了第二个tween.end来修改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; }属性，但它没有用。动画只是结结巴巴并停了下来。运动总是在第一个单位结束。

x.stop（）。animate（...）方法是＆＃34; no-no＆＃34;。更多的hickup - 不可接受。必须有一种方法可以在过程中更改动画结束，而不会停止它，减慢它或任何其他不需要的工件。

好的，这是代码：

jQuery.animate()

请帮助:)我已经浪费了8小时，没有运气试验这个。 {{1}}似乎完全无视任何改变正在进行的动画的尝试，我唯一能做的就是停止并重新启动它。我还设法对随后的动作进行排队，但总动作只是FUGLY n jumps而不是一次正常动作。

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 });
    }
}

唯一的区别是在注册事件后设置为新位置的滚动变量（在别处定义）。

现在效果很好。

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

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

// 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);

.animate（） - 如何更改动画结束进度？

1 个答案: