Question

请看这个小提琴 - ＆gt; 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

我认为您所看到的是默认动画类型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，那么它的用法会有所不同。你可以看看这个，看看它们的作用：

https://stackoverflow.com/a/33334461/3168107

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

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

Answer 2

尝试在.stop(true, true) .frontpage活动mousewheel .stop(false, true) .container活动时使用mousewheel

$(".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/

延迟启动jQuery动画

2 个答案: