使用懸停淡入淡出和fancybox的Javascript中的函數

當前下面的代碼顯示我的圖像爲灰度，並且在懸停時顯示 - 顏色顯示。我需要爲圖像添加一個更多的功能。當它懸停時，它需要成爲一個Fancybox畫廊的鏈接。我不確定如何編碼。注意：列表標籤具有縮略圖的灰色版本和彩色版本。 section標籤有我想要鏈接到的實際全尺寸版本。使用懸停淡入淡出和fancybox的Javascript中的函數

這是我的完整（建設中）網站的鏈接。

<!--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>

來源

2013-03-20 Steffane Cheebs Timm

您能更具體地瞭解您的問題嗎？ – 2013-03-20 15:39:18

我已經更新了:)希望有所幫助。 – 2013-03-20 16:25:21

好去重構通過創建AA功能單一變量，並重新使用：

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

，然後在需要的地方稱其爲：

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

來源

2013-03-20 15:48:13

此外，使用一類所有需要動畫的img，所以只需要一次懸停即可。

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

來源

2013-03-20 16:02:29 jordiburgos

使用懸停淡入淡出和fancybox的Javascript中的函數

回答

相關問題