有没有办法缩短这个jQuery脚本？

Question

我是jQuery的新手,当我将鼠标悬停在剩余的缩略图上时,我编写了这个以淡出三个缩略图.它看起来很混乱,我很想知道是否有一种方法可以用更清晰的方式对其进行编码,以提高我对选择器和标识符的了解.非常感谢任何发帖的人!

<script type="text/javascript">
    $(function() {  
        $(".christmas-list-1,").css("opacity","1.0");
        $(".christmas-list-1").hover(
            function () {
                $(".christmas-list-2,.christmas-list-3,.christmas-list-4").stop().animate({ opacity: 0.5 }, "fast");
            },
            function () {
                $(".christmas-list-2,.christmas-list-3,.christmas-list-4").stop().animate({ opacity: 1.0 }, "fast");
            }
        );

        $(".christmas-list-2,").css("opacity","1.0");
        $(".christmas-list-2").hover(
            function () {
                $(".christmas-list-1,.christmas-list-3,.christmas-list-4").stop().animate({ opacity: 0.5 }, "fast");
            },
            function () {
                $(".christmas-list-1,.christmas-list-3,.christmas-list-4").stop().animate({ opacity: 1.0 }, "fast");
            }
        );

        $(".christmas-list-3,").css("opacity","1.0");
        $(".christmas-list-3").hover(
            function () {
                $(".christmas-list-1,.christmas-list-2,.christmas-list-4").stop().animate({ opacity: 0.5 }, "fast");
            },
            function () {
                $(".christmas-list-1,.christmas-list-2,.christmas-list-4").stop().animate({ opacity: 1.0 }, "fast");
            }
        );

        $(".christmas-list-4,").css("opacity","1.0");
        $(".christmas-list-4").hover(
            function () {
                $(".christmas-list-1,.christmas-list-2,.christmas-list-3").stop().animate({ opacity: 0.5 }, "fast");
            },
            function () {
                $(".christmas-list-1,.christmas-list-2,.christmas-list-3").stop().animate({ opacity: 1.0 }, "fast");
            }
        );
    });
</script>

Answer 1

不要给他们单独的类名,只使用.christmas-list所有4:

$(".christmas-list").css("opacity","1.0").hover(function() {
   $(this).siblings(".christmas-list").stop().animate({opacity: 1.0}, "fast");
}, function() {
   $(".christmas-list").stop().animate({opacity: 1.0}, "fast");
});