Сокращение кода Jquery

Question

Я написал небольшой код jquery, но он выглядит очень излишним и детским.Кто-нибудь может помочь сократить его или сделать более эффективным?

Вот код:

    // DIM The Light Effect 
   var dimlight  = $(".dimlight"),
   showlight = $(".showlight"),
   overlay   = $("#overlay")
   playerlive   = $("#player_live"),
   lightswitch   = $(".light_switch")   

       playerlive.mouseover(function(){

       lightswitch.show();
      });

       playerlive.mouseout(function(){

       lightswitch.hide();
      });

       dimlight.click(function(){

       overlay.fadeIn();
       dimlight.hide();
       showlight.show();
      });

      showlight.click(function(){
       overlay.fadeOut();
       dimlight.show();
       showlight.hide();
      });

      showlight.click(function(){
       overlay.fadeOut();
       dimlight.show();
       showlight.hide();
      });

Спасибо уже много

Answer 1

Вы можете переписать весь код, как показано ниже:

$("#player_live").hover(function(){
    $(".light_switch").toggle();
});

var elems = $('.dimlight, .showlight');
elems.click(function(){
   elems.toggle();
   $("#overlay").fadeToggle();
});

Answer 2

Почему бы вам просто не сделать:

  $('.dimlight, .showlight').click(function(){
   if ($(this).hasClass('dimlight')) {
       overlay.fadeIn();
       dimlight.hide();
       showlight.show();
   } else {
       overlay.fadeOut();
       dimlight.show();
       showlight.hide();
   }
  });