Question

基本上我正试图让这些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>

Answer 1

jquery是否正确加载？我不得不添加＆＃34; https：＆＃34;让它加载到我身边：

<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后，您的代码工作正常。

Answer 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') 这实际上效果更好。

不知道为什么divs不会消失？

2 个答案: