Jquery code shortening

Question

I've written a small jquery code, but it looks very redundant and childish. Can anyone help shorten it or make more effecient?

Here's the code:

    // 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();
      });

Thx a lot already

Answer 1

you can rewrite the whole code as below:

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

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

Answer 2

Why don't you just do:

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