如何使用jQuery在滚动画面上淡入淡出图像? [英] How do I get an image to fade in and out on a scroll using jQuery?

问题描述

这个问题似乎很简单，但我似乎无法使淡入淡出效果正常工作，请查看小提琴以查看代码，您会注意到图像仅在您向上滚动时会淡入，而在您滚动时不会淡出向下滚动，为什么会发生这种情况?我认为我不完全了解自己编写的代码，希望能得到一些帮助.

This question seems easy but I cant seem to get the fade effect to work properly, please view the fiddle to see the code, you will notice that the image only fades in when you scroll back up and does not fade out when you scroll down, why does this happen? I don't think I fully understand the code I've written I would appreciate some help.

这是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');
$(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
   }
});

这篇关于如何使用jQuery在滚动画面上淡入淡出图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！