投资组合缩略图不透明度

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