javascript - 让一个div淡出不透明度

Question

我正在尝试将 fadeIn() 的 div 从白色变为正常的深灰色。但是，我的尝试失败了，它正在杀死我在页面上的其他脚本。我做错了什么？

function(){
	$('.dark-gray').fadeTo(1200, 1);
}

.dark-gray {
	height: 500px;
	width: 100%;
	background-color: #202020;
}
#dark-gray-container {
	text-align: center;
	padding: 150px 0;
}
#dark-gray-container-title {
	color: #FFF;
	font-size: 1.7em;
	font-weight: bold;
}
#dark-gray-container-description {
	color: #FFF;
	font-size: 1.3em;
	padding-top: 40px;
}
#dark-gray-container-button {
	padding-top: 80px;
}
#dark-gray-container-button-span {
	color: #FFF;
	padding: 20px 25px;
	border: 2px solid #FFF;
	cursor: pointer;
	transition: ease-in-out .3s;
}
#dark-gray-container-button-span:hover {
	border: 2px solid #45a5ba;
	transition: ease-in-out .3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dark-gray">
		<div id="dark-gray-container">
			<div id="dark-gray-container-title">GET IN TOUCH WITH US</div>
			<div id="dark-gray-container-description">Looking for advice or would you like to speak to a member of the OD team? Please hit the button below.</div>
			<div id="dark-gray-container-button"><span id="dark-gray-container-button-span">CONTACT US</span></div>
		</div>
	</div>

更新:

我希望该功能在滚动到 div 时启动。这个呢？

$(function() {


var oTop = $('.green').offset().top - window.innerHeight;
    $(window).scroll(function(){

        var pTop = $('body').scrollTop();
        console.log( pTop + ' - ' + oTop );
        if( pTop > oTop ){
            fadeinGray();
        }
    });
});
function fadeinGray(){
    $('.dark-gray').fadeTo(1200, 1);
}

Answer 1

查看工作示例 HERE

有几个问题。首先，您的 dark-gray 类始终是深灰色。一开始，您必须将 CSS 不透明度更改为低于 1 的值。然后你使计算顶部偏移量变得复杂。