使用悬停淡入淡出和fancybox的Javascript函数

当前，下面的代码以灰度显示我的图像，当鼠标悬停在上面时，它以彩色显示。我需要在图像中再添加一个函数。当鼠标悬停在上面时，它需要成为Fancybox图库的链接。我不知道如何编码。注意：列表标记具有缩略图的灰色版本和彩色版本。section标记具有我要链接到的实际完整版本

这是我的完整（正在建设）网站的链接

$（文档）.ready（函数（）{
$（“img.waldengray”）。悬停(
函数（）{
$（this.stop（）.animate（{“不透明”：“0”}，“慢”）；
},
函数（）{
$（this.stop（）.animate（{“不透明”：“1”}，“慢”）；
});
});
$（文档）.ready（函数（）{
$（'.fancybox拇指'）。fancybox({
效果：“无”，
下一个效果：“无”，
closeBtn:false，
箭头：错，
下一步：没错，
助手：{
拇指：{
宽度：50，
身高：50
}
}
});
});

`

我们可以通过创建一个函数变量并重用它来进行重构：

var getAnimFn = function(config) {
       return function() {
          $(this).stop().animate(config, "slow");
       }
};

然后在需要的地方调用它，如下所示：

getAnimFn({"opacity": "0"});
getAnimFn({"opacity": "1"});

---

另外，为所有需要设置动画的img使用一个类，因此只需要一个hover调用

    $(".THE_CLASS").hover(
        function() {
            $(this).stop().animate({"opacity": "0"}, "slow");
        },
        function() {
            $(this).stop().animate({"opacity": "1"}, "slow");
        }
    );

---

你能更具体地回答你的问题吗？我已经更新了：）希望对你有所帮助。

    $(".THE_CLASS").hover(
        function() {
            $(this).stop().animate({"opacity": "0"}, "slow");
        },
        function() {
            $(this).stop().animate({"opacity": "1"}, "slow");
        }
    );