0

現在、以下のコードは私の画像をグレースケールで表示し、ホバーするとカラーで表示されます。画像にもう 1 つの関数を追加する必要があります。ホバーすると、Fancybox ギャラリーへのリンクになる必要があります。それをコーディングする方法がわかりません。注: リスト タグには、サムネイルのグレー バージョンとカラー バージョンがあります。セクション タグには、リンクしたい実際のフル サイズ バージョンがあります。

これは、私の完全な (建設中の) サイトへのリンクです。

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

単一の関数変数を作成して再利用することで、リファクタリングに進みます。

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

そして、必要な場所で次のように呼び出します。

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

また、アニメーション化する必要があるすべての img に対してクラスを使用するため、hover を 1 回呼び出すだけで済みます。

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