使圖像從不透明度消失：0到不透明度：達到位置時爲1

Question

我已經搜索了幾個小時，用於在用戶到達其位置時創建淡入效果的代碼，但是我的代碼繼續部分工作或根本不工作。我認爲這可能是我的CSS定位，它會拋棄它，但我可能是錯的。如果有人能指出我的錯誤，那麼這肯定會對我有幫助，併爲其他類似問題的人解決問題。

這裏是我試圖模仿（僅圖像，而不是一個div）小提琴： http://jsfiddle.net/tcloninger/e5qaD/

當我結合上面搗鼓代碼到我的網站，所有的圖像與「隱藏我」類會立即消失，而不是我一到達他們就一次。所以我找到了這個小提琴，看看它是否會更好地檢測元素的位置。 http://jsfiddle.net/moagrius/wN7ah/

這導致圖像完全沒有消失。這裏是我的代碼，我試圖用在一起的作品：

代碼來檢測.hideme類的位置，使不透明時，它是在窗口：中

$(document).ready(function() { 

$.fn.isOnScreen = function(){ 

var win = $(window); 

var viewport = { 
    top : win.scrollTop(), 
    left : win.scrollLeft() 
}; 
viewport.right = viewport.left + win.width(); 
viewport.bottom = viewport.top + win.height(); 

var bounds = this.offset(); 
bounds.right = bounds.left + this.outerWidth(); 
bounds.bottom = bounds.top + this.outerHeight(); 

return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 
}; 

$(window).scroll(function() { 
    if($('.hideme').isOnScreen()){ 
     $('.hideme').animate({'opacity':'1'},500); 
}); 

示例的div我如何HTML設置以及其中.hideme類：

<div id="two" class="page"> 
<img src="img/splithead.png" alt="divided attention" class="icons vandhcenter"/> 
<div class="abs"> 
<img src="text/div2.png" alt="section two text" class="text hideme"/>  
</div> 
</div> 

在這個問題是定位的情況下，這裏是我的CSS的摘錄：

div.page 
{ 
display:block; 
height:100%; 
position:relative; 
width:100%; 
} 

img.icons 
{ 
height:600px; 
width:800px; 
} 

.vandhcenter 
{ 
margin: auto; 
position: absolute; 
top: 0; left: 0; bottom: 0; right: 0; 
} 

img.text 
{ 
float:left; 
position:relative; 
width:800px; 
} 

.hideme 
{ 
opacity:0; 
} 

如果這一切看起來像這樣的列表混亂這裏有一個鏈接的jsfiddle所以你可以看到我所有的代碼。沒有真正的輸出，因爲我沒有上傳我的所有圖像文件，但可能更容易看到代碼。 的jsfiddle，淨/ uxB4D/

Answer 1

什麼你所描述的一樣 「懶加載」 的聲音。有相當多的插件已經這樣做了;例如：http://www.appelsiini.net/projects/lazyload