在 div 上創建淡出效果

Question

我在創建這個時遇到了麻煩。

我使用 jQuery 作為我的主要 JS 庫。 我想使用 fade() function 創建一個 div，當它滾動時會淡出以顯示下面的內容。

例如，一個灰色背景的 div 頂部有一個圖像，它會淡化以顯示下面的內容。 這可能嗎？ 我不太擅長 JS/jQuery

Answer 1

像這樣的 http://jsfiddle.net/dkpgQ/2/ ？

編輯：代碼...

HTML

<div id="container">
    <div id="content">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
    </div>
    <div id="overlay">
    </div>
</div>

Javascript

$("#overlay").mouseover(function() {
   $("#overlay").fadeOut("slow"); 
});

CSS

#container {
    position:relative;
    width:200px;
}

#overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:grey;
}

Answer 2

您可以使用 jquery

$('#book').fadeOut('slow', function() {
   // Animation complete.
});

此鏈接包含更多解釋。

或者您可以使用 jquery 動畫 function，如本 鏈接所述