jQuery 动画开始延迟

Question

请看这个fiddle -> http://jsfiddle.net/LwL9Ls4o/1/

JS:

$(".frontpage").bind('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta / 120 < 0) {
        $(".frontpage").stop().animate({
            top: "-100%"
        }, 700);
    }
});

$(".container").bind('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta / 120 > 0  && $(".container").scrollTop() < 10) {
        $(".frontpage").stop().animate({
            top: "0"
        }, 700);
    }
});

基本上，它在向下滚动时将首页移出视线，并在向上滚动时将其带回。它一直运行良好，只是在动画开始时速度异常缓慢。有什么建议么？谢谢！

Answer 1

尝试在 .frontpage mousewheel 事件中使用 .stop(true, true)，在 .container mousewheel 事件

中使用 .stop(false, true)

$(".frontpage").bind('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta / 120 < 0) {
        $(".frontpage").stop(true, true).animate({
            top: "-100%"
        }, 700);
    }
});

$(".container").bind('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta / 120 > 0  && $(".container").scrollTop() < 10) {
        $(".frontpage").stop(false, true).animate({
            top: "0"
        }, 700);
    }
});

jsfiddle http://jsfiddle.net/LwL9Ls4o/4/

Answer 2

我认为您看到的是默认动画类型 swing，它开始缓慢。您可以将其更改为 linear，这是另一个选项。我还对脚本做了一些更改，现在 .on 是首选，不使用插件的 mousewheel 将无法在所有浏览器上运行。 wheel 事件将但仅限于现代事件，如果浏览器支持深度，我建议使用 plugin.

Fiddle

$('.frontpage').on('wheel', function(e) {

    if (e.originalEvent.deltaY > 0) {
        $(this).stop().animate({
            top: '-100%'
        }, 700, 'linear');
    }
});

$('.container').on('wheel', function(e) {

    if (e.originalEvent.deltaY < 0  && $(this).scrollTop() < 10) {
        $('.frontpage').stop().animate({
            top: 0
        }, 700, 'linear');
    }
});

如果您想使用 mousewheel.js 插件而不是 wheel，它的用法有点不同。你可以看看这个，看看他们都在行动：

这是一个有趣的页面，可以检查与缓动类型相关的所有曲线和速度：

http://jqueryui.com/resources/demos/effect/easing.html

jQuery 动画开始延迟

Delay in start of jQuery animate

jquery

scroll

mousewheel