javascript - 如何使用 jQuery 让图像在滚动条上淡入淡出？

Question

这个问题似乎很简单，但我似乎无法让淡入淡出效果正常工作，请查看小提琴以查看代码，您会注意到图像仅在您向上滚动时淡入，而在您向下滚动时不会淡出，为什么会这样？我不认为我完全理解我编写的代码我会很感激一些帮助。

这是jQuery代码

var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<10){
     divs.stop(true, true).fadeIn(5000);
} else {
     divs.stop(true, true).fadeOut(5000);
 }
});

先感谢您！

http://jsfiddle.net/a4FM9/809/

Answer 1

Demo

var divs = $('.banner');
$(window).scroll(function(){
   if($(window).scrollTop()<10){
         divs.stop(true, true).hide().fadeIn(5000); //added hide before fadeIn
   } else {
         divs.stop(true, true).show().fadeOut(5000); //added show before fadeOut
   }
});

Answer 2

非常简单，您可以删除.stop(true, true)它，它会在两个方向上消失：

工作示例

var divs = $('.banner');
$(window).scroll(function(){
   if($(window).scrollTop()<=10){
         divs.fadeIn(5000);
   } else {
         divs.fadeOut(5000);
   }
});

如果您想在滚动停止后进行淡入淡出，您可以使用超时功能，如下所示：

工作示例 2

$(window).scroll(function () {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        var divs = $('.banner');
        if ($(window).scrollTop() <= 200) {
            divs.fadeIn(5000);
        } else {
            divs.fadeOut(5000);
        }
    }, 1000)); //timeout set to 1 second
});

有关此超时功能的更多信息，请参阅：yckart 的超时功能。