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)，它就可以向两个方向消失：

<强> 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。

如何使用jQuery将图像淡入淡出？

2 个答案: