Question

我一直在努力让这个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像素，然后让效果同时工作。我试图纠正这个＆＃34;闪烁＆＃34;但我无法得到它。我尝试过使用.fadeIn(1000).animate({'opacity':'1','left':'25%'}, 1500);，但它并没有创造出我想要同时实现的效果。

请参阅JSFIDDLE，了解我所谈论的内容。你能帮我吗？还是指出我正确的方向？谢谢。

Answer 1

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

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

jQuery滚动到fadein并同时在div上制作动画

1 个答案: