不知道为什么div不会淡入？答案

【问题标题】：Not sure why divs won't fade in?不知道为什么div不会淡入？
【发布时间】：2014-12-13 01:15:35
【问题描述】：

基本上我试图让这些 div 淡入，但他们不会！我不确定这是否是最好的方法，但我想做的是获得制作类似于这个网站的动画的技能：http://theme-fusion.com/avada/ 当你向下滚动时，元素就会出现。我认为它看起来很棒！如果有人知道教授此内容的网站或视频，将不胜感激！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</head>    
<body>
<style type="text/css">
#container
{
    height:2000px;    
}    
#container DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}    
.hideme
{
    opacity:0;
}
</style>
<script type="text/javascript">
$(document).ready(function() {        
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){        
        /* Check the location of each desired element */
        $('.hideme').each( function(i){                
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();                
            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){                    
                $(this).animate({'opacity':'1'},500);                        
            }                
        });         
    });        
});
</script>
<div id="container">        
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>        
</div>    
</body>
</html>

【问题讨论】：

看看jsfiddle.net/ak9Hb/7

标签： jquery html css

【解决方案1】：

jquery 是否正确加载？我必须添加“https：”才能将其加载到我身边：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</head>

加载 jquery 后，您的代码运行良好。

【讨论】：

这很完美！不知道为什么我必须添加 https: 因为我从谷歌库中复制了它。你有没有机会知道...这是网站在滚动元素淡入时所做的事情吗？
我不知道其他网站如何在滚动时淡入，但您的代码有效。下面的答案建议使用fadeIn()。如果要将 div 设置为 display:none，fadeIn 是一个选项。您的方法使它们保持流动并简单地消除了不透明度。两种方式都行。
谢谢...你能不能做一个淡入淡出选项的 jsFiddle 演示？如果您有时间将不胜感激！
看起来“Just Code”已经使用上面的 FadeIn 制作了 jsFiddle 演示：jsfiddle.net/ak9Hb/7

【解决方案2】：

为什么不直接使用 fadeIn() 而不是改变不透明度？

如果你不想使用fadeIn()，给元素一些过渡。

div {
// your style
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}

然后，在你的 JS 中使用 .css() 函数

$(element).css('opacity',1);

另外，不要使用#container DIV，而是使用#container div（小写），以防万一。

编辑： 如果你想使用fadeIn()，首先给元素一个内联样式display: none;，然后调用$(element).fadeIn('slow/fast/miliseconds') 这实际上效果更好。

【讨论】：

感谢您的贡献...解释得很好，两者都是不错的选择:)