0

目前，下面的代码将我的图像显示为灰度，当将鼠标悬停在上方时 - 它以彩色显示。我需要在图像中再添加一项功能。当悬停在它上面时，它需要成为一个 Fancybox 画廊的链接。我不确定如何编码。注意：列表标签有缩略图的灰色版本和彩色版本。section 标签具有我想要链接到的实际全尺寸版本。

这是我的完整（建设中）网站的链接。

<!--gray to color on hover code--> 

<script type='text/javascript'>
    $(document).ready(function(){

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

</script>

<!--generic fancybox code-->

<script type='text/javascript'>
$(document).ready(function(){
$('.fancybox-thumbs').fancybox({
                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : false,
                arrows    : false,
                nextClick : true,

                helpers : {
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });
});
</script>


<body>



<!--gray and color thumbnails-->
<ul>

<li><img src="images/waldengray.png" alt="waldengray" width="362" height="105" `class="waldengray" id="waldengray"></li>`
<li><img src="images/waldencolor.png" alt="waldencolor" width="362" height="105" class="waldencolor" id="waldencolor"></li>
</div>

</ul>


<!--full size image-->        
<section>
    <p><a class="fancybox-walden" data-fancybox-group="walden" href="images/waldenlrg.png"><img src="images/waldenlrg.png" alt="" /></a></p>
</section>












</div><!--wrapper-->


</body>
</html>
4

2 回答 2

0

此外，为您需要动画的所有 img 使用一个类，因此只需要一次调用悬停。

    $(".THE_CLASS").hover(
        function() {
            $(this).stop().animate({"opacity": "0"}, "slow");
        },
        function() {
            $(this).stop().animate({"opacity": "1"}, "slow");
        }
    );
于 2013-03-20T16:02:29.160 回答
0

通过创建单个函数变量并重用它来进行重构：

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

然后在需要的地方调用它：

getAnimFn({"opacity": "0"});
getAnimFn({"opacity": "1"});
于 2013-03-20T15:48:13.297 回答