在onload上添加淡入效果

如何添加淡入淡出效果的specefic代碼？我想讓圖片在onload上淡入。已經做了一些關於Stackoverflow的研究，但是找不到任何有用的東西。一些幫助將不勝感激。在onload上添加淡入效果

<script type="text/javascript"> 
window.onload = function(){ 
     var img = document.getElementById('img') 
     if(img.clientHeight<$('#div').height()){ 
      img.style.height=$('#div').height()+"px"; 
     } 
     if(img.clientWidth<$('#div').width()){ 
      img.style.width=$('#div').width()+"px"; 
     } 
} 
</script>

額外的問題：是否也可以爲此代碼添加加載函數？

來源

2013-03-03 sjarmenitt

Hey Sj，有沒有理由不使用jQuery或其他DOM抽象層？ – Slukehart 2013-03-03 22:21:33

http://api.jquery.com/fadeIn/ – Fresheyeball 2013-03-03 22:22:09

@Slukehart不，不是真的。我找到了這個解決方案，並且工作順利。 – sjarmenitt 2013-03-03 22:23:48

Sj您試圖做的事情可以使用jQuery進行簡化。 jQuery是一個JavaScript庫，它使HTML文檔的工作變得更容易。

這裏是一個小小提琴展示他們淡入方法：http://jsfiddle.net/zgRtd/3/

只是爲了確保您的明確上發生的事情：

我們聲明函數命名負載圖像 - 此功能使用jQuery的附加我們的jQuery對象的fadeIn方法（用CSS選擇器引用）。

圖像設置爲顯示：無;原來。

function loadImage() { 
    $('#your-image').fadeIn('slow', function() { 
     // Animation complete 
    }); 
}

我們調用函數一旦文件被加載（這可以被綁定到任何事件），我在的jsfiddle例如評論了這一點。

$(document).on('ready', function() { 
    loadImage(); 
});

來源

2013-03-03 22:40:12 Slukehart

這是完美的，工作順利。謝謝。但是，你有什麼想法，我可以如何實現上面的代碼？ – sjarmenitt 2013-03-03 22:48:41

那麼你只是不知道該把代碼放在哪裏？您需要將其添加到頁面底部的腳本標記之間 – Slukehart 2013-03-04 02:40:42

在onload上添加淡入效果

回答

相關問題