投資組合縮圖不透明

Question

我是一名設計師，創造了自己的投資組合。投資組合的想法是在用戶滾動時延遲加載我的工作，並且他們可以使用左側的縮略圖跳轉到項目（僅使用錨點）。

我的問題：有沒有辦法讓它，所以右側的縮略圖是不透明的，除非用戶正在查看頁面的部分與一個給定的項目的圖像？換句話說，只有當我的示例鏈接中的縮略圖爲全色時，纔會在用戶位於包含3個關聯項目圖像的頁面部分。

鏈接：http://seans.ws/sandbox/seansSite/

謝謝。如果您需要任何澄清，請讓我知道！

-Sean

Answer 1

當然，首先，降低對你的CSS圖像的不透明度：

#moveitContainer img { opacity: 0.3; } 

既然你已經使用jQuery，改變不透明度是很容易。

$('#moveitContainer') 
    .mouseenter(function(e){ 
     $(this).find('img') 
      .stop(true) //get rid of queued animations 
      .fadeTo(200, 1.0) 
    }) 
    .mouseleave(function(e){ 
     $(this).find('img') 
      .stop(true) 
      .fadeTo(200, 0.3) 
    });