延迟的jQuery开始动画

请看看这个小提琴 - >http://jsfiddle.net/LwL9Ls4o/1/延迟的jQuery开始动画

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

基本上它移动了FrontPage淡出人们的视线对下滚，并把它背在scrollup。它一直在正常工作，除了在动画开始的时候奇怪地慢。有什么建议么？谢谢！

来源

2015-10-25 esln

我想你现在看到的是默认的动画类型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

来源

2015-10-25 11:39:46 Shikkediel

非常感谢！我也应该试试这个插件：D – esln

回到你的问题。特殊的放松方式也非常简洁，您可以使用底部链接中的所有效果，而不是仅使用两种基本效果。我最喜欢的两个插件。 https://plugins.jquery.com/jquery.easing/ – Shikkediel

尝试.containermousewheel事件

$(".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使用.stop(true, true)在.frontpagemousewheel事件，.stop(false, true)http://jsfiddle.net/LwL9Ls4o/4/

来源

2015-10-25 05:35:15 guest271314

延迟的jQuery开始动画

回答

相关问题