jQuery自动淡入div并在滚动时淡出 [英] jQuery automatically fade in div and fade out on scroll

问题描述

我对JQuery有点新，我试图使一个div在页面的底部淡入时，当页面加载时，然后当用户开始滚动div需要淡出，然后重新出现时向后滚动到顶部。

我为了褪色div而做的代码不工作，可以在这里看到 http://jsfiddle.net/DeZnT/

我使用的jQuery是

  $（document）.ready（function（）{
 $（function（）{
 $（。other_product_links ）.animate（{bottom：'0px'}）; 
}）; 
}）;提前感谢您的时间和帮助。
 =h2_lin>解决方案
要淡入（还有一个对应的fadeOut方法）：
  $（＃element）。fadeIn（300）; 
  
为了检测用户滚动的距离，您可以使用如下：
  $（document）.ready（function（）{
 $（window）.scroll（function（）{
 var posFromTop = $（window）.scrollTop（）; 
 
 if（posFromTop> 200）{
 //如果超过200px从顶部做某事
 $ b b 
} else {
 //否则做其他事情
 
} 
}）; 
}）; 
  
 
I am a little new to JQuery and I am trying to make a div at the bottom of the page fade in when the page loads and then when a user starts to scroll the div needs to fade out and then reappear when scrolling back to the top.

The code I have done just to fade the div in isn't working and can be seen here http://jsfiddle.net/DeZnT/ 

The jQuery I am using is 
$(document).ready(function () {
    $(function(){
         $(".other_product_links").animate({bottom:'0px'});
      });
});
Thank you in advance for your time and assistance.
解决方案
To fade in (There's also a corresponding fadeOut method):
$("#element").fadeIn(300);
For detecting how far down a user has scrolled, you can use something like this:
$(document).ready(function(){
    $(window).scroll(function(){
        var posFromTop = $(window).scrollTop();

        if(posFromTop > 200){
        // if more than 200px from the top do something


        } else {
        // otherwise do something else.

        }
    });
});


                        
这篇关于jQuery自动淡入div并在滚动时淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！