このjQueryスクリプトを短縮する方法はありますか？

Question

私はjQueryを初めて使用しています。残りのサムネイルにカーソルを合わせると、3つのサムネイルがフェードアウトするようにコーディングしました。ちょっと混乱しているようで、セレクタと識別子の知識を向上させるためにこれをより洗練された方法でコーディングする方法があるかどうかを知りたいと思っています。投稿した人の多くに感謝！

<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

fadeOut http://api.jquery.com/fadeOut/をforループとともに使用することを考えましたか？

Answer 2

だけで、すべての4のため.christmas-listを使用し、それらを別々のクラス名を与えないでください：あなたは機能$に何回も呼び出している

$(".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"); 
}); 

Answer 3

。それを避けるようにしてください（ポイント4のthis articleを読んでください）。

私はあなたがこのような何かをすることができると思う：あなたは `for`ループを聞いたことがあり

<script type="text/javascript"> 
$(function() { 

var arrJChr = {}; 

    for(i=1;i<=4;i++){ 
     arrJChr[i] = $(".christmas-list-"+i); 
    } 
    var animateFun = function(idNot, nOpacity){ 
     for(i=1;i<=4;i++){ 
      if(i!=idNot){ 
       arrJChr[i].stop().animate(
        { opacity: nOpacity }, 
        "fast" 
       ); 
      } 
     } 
    }; 

    for(i=1;i<=4;i++){ 
     arrJChr[i].css("opacity","1.0"); 
     arrJChr[i].hover(function(){ 
      animateFun(i,0.5); 
     },function(){ 
      animateFun(i,1.0); 
     }); 
    } 

}); 
</script> 

Answer 4

$(function() { 
    var elms = ".christmas-list-1, .christmas-list-2, .christmas-list-3, .christmas-list-4"; 
    $(elms).css("opacity", "1").hover(
     function() { $(elms).not($(this)).stop().animate({ opacity: .5 }, "fast"); }, 
     function() { $(elms).not($(this)).stop().animate({ opacity: 1 }, "fast"); } 
    ); 
});