当不透明度动画时，Jquery滚动标题会中断

Question

当用户滚动浏览页面上的第一部分时，我有一个标题，我想淡入。我使用不透明度为0的div，它变为不透明度1，如下所示：

$(window).scroll(function () {
           // If the scroll position is past the 1st section...
            if ($('body').scrollTop() > 500) {

                $('#ribbon').css('opacity', 1);

            } else {

                $('#ribbon').css('opacity', 0);
            }
    });

这很好但是当我尝试使用fadeIn()或animate()设置不透明度的动画时，它会停止工作并且不会淡入div。

Answer 1

的 LIVE DEMO

$(window).scroll(function () {

    var opacity = $(this).scrollTop() > 500 ? 1 : 0 ;
    $('#ribbon').stop().fadeTo(800, opacity);      

});