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

【问题标题】：How do I get an image to fade in and out on a scroll using jQuery?如何使用 jQuery 让图像在滚动条上淡入淡出？
【发布时间】：2013-07-29 11:38:01
【问题描述】：

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

这里是 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/

【问题讨论】：

var divs = $('.banner'); 确实应该在事件函数中，以便它始终获取当前元素，否则它将是静态的并且仅获取代码执行时存在的元素。
@PatrickEvans 你不能说应该在事件函数中。做他在给定示例中所做的事情是非常正确的。没有看到其余的代码，你不能说别的。

标签： javascript jquery

【解决方案1】：

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

Working Example

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

如果你想在滚动停止后进行淡入淡出，你可以使用这样的超时函数：

Working Example 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's timeout function。

【讨论】：

【解决方案2】：

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

【讨论】：

OP 还要求图像在向下滚动时淡出。