投资组合缩图不透明

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) 
    });