Question

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

更新：

我希望函数在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的值。然后你让计算顶部偏移变得复杂。

Answer 2

这是fadeIn mouseenter这是代码

的方法

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <style type="text/css">
       div.mystyle{
        width:500px;
        height: 500px;
        border:2px solid black;
       }

       div.check{
        width: 100%;
        height: 100%;
        background-color: gray;
        display: none;
       }
    </style>
</head>
<body>

  <div class="mystyle">
    <div class="check">

    </div>
  </div>

<script type="text/javascript">
    $(document).ready(function(){
        $(".mystyle").mouseenter(function(){
            $(".check").fadeIn(1000);
        });

    });
</script>


</body>
</html>

如果您想要回叫功能（当鼠标离开时）也使用此代码。

 $(document).ready(function(){
            $(".mystyle").mouseleave(function(){
                $(".check").fadeIn(1000);
            });

        });

让div淡化不透明度

2 个答案: