如何使用jQuery緩慢淡出圖像ON LOAD

我想讓圖像在加載時緩慢淡出。想法是，我點擊進入我的網站的名字，在我的主頁上短暫停留，就像來自我的介紹頁面的視覺回聲。如何使用jQuery緩慢淡出圖像ON LOAD

我確定它是一個告密者，但我是編碼新手，所以我很掙扎。

我收集了我需要的CSS可見性：隱藏; （不知道如果我需要把它放在jQuery或實際的CSS，或兩者），因爲我希望我的網頁上的其他元素不會跳躍時，圖像完全消失。

NB已經在的jsfiddle取代圖像文本

2012-01-02 Cress

試試這個：

$(document).ready(function(){  
    $('#namefade').fadeOut(5000); 

});

http://jsfiddle.net/BdHmG/7/

來源

2012-01-02 18:23:41 mhps

甜，但它是淡出我後:)謝謝 – Cress 2012-01-02 18:58:56

只需將其更改爲$（'＃namefade'）。淡出（5000）; – mhps 2012-01-02 19:01:17

哦，現在很甜！ – Cress 2012-01-02 19:13:35

從你有什麼嘗試以下

$(document).ready(function(){  
    $('#namefade').fadeOut('slow', function() { $(this).css({visibility: 'hidden', opacity: 0})}); 
});

變化：

使用$(document).ready()代替$(window).load()
ALTER CSS在回調，不是馬上前
淡出

的.fadeOut()函數採用一個可選的第二參數，其中，如果所定義，並且是功能將在被稱爲每個項目已完成淡出的上下文。所有jQuery的動畫功能都是如此。

來源

2012-01-02 18:22:31 rejj

謝謝！我只是想讓技術專業人士熟悉它，所以不能100％地理解它的工作原理。我在我的jquery文件的開始處有$（document）.ready（）（這是我的所有網站jquery的一個文件，當然除了插件文件和庫文件之外）。我認爲函數.load意味着jquery能夠處理負載。你是在說它的矯枉過正？ – Cress 2012-01-02 19:03:31

我會嘗試你的建議 – Cress 2012-01-02 19:14:35

jQuery會調用你在'$（document）.ready（）'中定義的函數來響應它檢測到DOM已經完全加載並準備好進行交互。 – rejj 2012-01-02 19:15:44

你需要做這樣的事情。

http://jsfiddle.net/BdHmG/4/

我包裝我的內容是一個div中淡出。然後，我將該div的高度設置爲任何圖像大小的高度。

只要你知道：

visibility:hidden將隱藏元素，但保持其形狀
display:none將隱藏元素和摺疊形狀

來源

2012-01-02 18:24:12 Seth

哇是的！賽斯，謝謝你這麼多！淡化一種享受，但其他元素正在跳躍。我仍然不確定隱藏在哪裏，或者不顯示任何東西，對不起！ – Cress 2012-01-02 18:58:42

仍然有文字跳躍，現在我意識到，我的介紹頁面圖像（我的名字gif）與我的主頁不同步淡出了一個。與包含的div做什麼？介紹頁面沒有包含div，因爲我希望我的名字圖像始終是相對的，在中間，與browswer窗口調整大小有關）。 – Cress 2012-01-02 19:23:24

整理圖像sinc。問題與Z-index設置。現在有另一個問題，所以會重新發布。 – Cress 2012-01-02 19:36:17

如何使用jQuery緩慢淡出圖像ON LOAD

回答

相關問題