得到一個div褪色在不透明

我想獲得一個div從fadeIn()從白色到正常的深灰色。然而，我的嘗試失敗了，它正在我的頁面上殺死其他腳本。我究竟做錯了什麼？得到一個div褪色在不透明

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

.dark-gray { 
 
\t height: 500px; 
 
\t width: 100%; 
 
\t background-color: #202020; 
 
} 
 
#dark-gray-container { 
 
\t text-align: center; 
 
\t padding: 150px 0; 
 
} 
 
#dark-gray-container-title { 
 
\t color: #FFF; 
 
\t font-size: 1.7em; 
 
\t font-weight: bold; 
 
} 
 
#dark-gray-container-description { 
 
\t color: #FFF; 
 
\t font-size: 1.3em; 
 
\t padding-top: 40px; 
 
} 
 
#dark-gray-container-button { 
 
\t padding-top: 80px; 
 
} 
 
#dark-gray-container-button-span { 
 
\t color: #FFF; 
 
\t padding: 20px 25px; 
 
\t border: 2px solid #FFF; 
 
\t cursor: pointer; 
 
\t transition: ease-in-out .3s; 
 
} 
 
#dark-gray-container-button-span:hover { 
 
\t border: 2px solid #45a5ba; 
 
\t 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"> 
 
\t \t <div id="dark-gray-container"> 
 
\t \t \t <div id="dark-gray-container-title">GET IN TOUCH WITH US</div> 
 
\t \t \t <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> 
 
\t \t \t <div id="dark-gray-container-button"><span id="dark-gray-container-button-span">CONTACT US</span></div> 
 
\t \t </div> 
 
\t </div>

UPDATE：

我希望在格滾動到函數啓動。那這個呢？

$(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); 
}

來源

2016-01-21 Becky

你的jQuery代碼是這樣的嗎？或者它實際上是更大代碼的一部分？此代碼不正確 –

我有更多的jQuery，但其他jQuery沒有涉及這個特定的代碼。無論我在這裏做錯了什麼，都會殺死其餘的人。 – Becky

如果您試圖定義一個函數，這是不正確的。它應該是'function funcName（parameters）{}'。如果它嵌套在另一個事件中，則它是正確的：$（「。selector」）。click（function（）{...}）。哪一個？ –

退房工作的例子HERE

有幾個問題。首先你的dark-gray班總是暗灰色。一開始你必須將CSS不透明度更改爲低於1的值。那麼你計算頂部偏移量會很複雜。

來源

2016-01-21 03:30:26

太棒了！謝謝，我不知道首先不透明度必須低。如果沒有指定，我認爲這是默認設置。 – Becky

@Becky：很高興幫助 –

這是你如何使用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); 
      }); 

     });

來源

2016-01-21 04:44:35

得到一個div褪色在不透明

回答

相關問題