jQuery滚动以淡入淡出并在div上同时设置动画答案

【问题标题】：jQuery scroll to fadein and animate simultaneously on divjQuery滚动以淡入淡出并在div上同时设置动画
【发布时间】：2014-10-05 03:34:09
【问题描述】：

我一直试图让这个 jQuery 正确，但我似乎无法正确。我想要做的是让用户滚动，当他们滚动到相应的像素限制时，jquery fadein 和 animate 会发生，创造一个很酷的小效果。我试图使用fadeIn，但它没有同时工作，所以我使用css。问题是当我让它工作时，当我继续滚动时，图像继续闪烁。

这是我的代码。

    $(window).bind("scroll", function() {
    if ($(this).scrollTop() > 560 ) {
        $('#subOverlay').css({'display':'block', 'opacity':'0'})
        .animate({'opacity':'1','left':'25%'}, 1500);
    } else {
        $("#subOverlay").stop().fadeOut();
    }
});

您会在上面的代码中注意到，我希望用户滚动到 560 像素，然后让效果同时工作。我试图纠正这种“闪烁”，但我就是无法理解。我尝试过使用.fadeIn(1000).animate({'opacity':'1','left':'25%'}, 1500);，但它不会产生我想要同时实现的效果。

请参阅JSFIDDLE 了解我所说的示例。你能帮我吗？或者指出我正确的方向？谢谢。

【问题讨论】：

上面的代码有什么问题？（除了它会污染滚动事件吗？）
请张贴小提琴，以便我们更好地理解您的问题..
好的，没问题，我会在 1 分钟内更新。谢谢。
@user26409021 小提琴添加到我的问题中。感谢您的帮助。

标签： jquery html css jquery-animate fadein

【解决方案1】：

尽可能避免使用 jQuery 进行 CSS 工作。这包括css、animate、fadeOut 等。这是一个示例，其中 JavaScript 仅切换类：

http://jsfiddle.net/05Leto4e/1/

【讨论】：

感谢您的帮助。这将起作用。如果你知道如何在不使用 CSS 'transition' 的情况下创建它，那就更好了。同时工作的淡入淡出和动画？否则我将不得不考虑跨浏览器支持的“过渡”，对吧？
是的，即使您想使用animate 和fadeIn，我发布的代码也会有所帮助。最初的问题是 if 语句的第一部分在滚动超过 560 后每秒运行数百次。您需要 overlay_hidden 变量来确保只运行一次。