Jquery hide elements on mouseout()

Question

I've just started learning Jquery and I was lucky enough to get something to work. My first code was to create a "Dim the light" effect when a button is pressed and "Show the light" when the light is out. That part is working quite fine.

Here's the code:

$(document).ready(function(){
  $(".dimlight").click(function(){
    $("#overlay").fadeIn();
    $(".dimlight").hide();
    $(".showlight").show();
  });
  $(".showlight").click(function(){
    $("#overlay").fadeOut();
    $(".dimlight").show();
    $(".showlight").hide();
  });
});  

Now I wanted to take it a step further. I'd like to hide any visible button (.showlight or .dimlight) on mouseout. Basically, the active button should only be visible when the user hovers the player (#player div). Now I tried doing it, but it didn't work. I suspect that the syntax is wrong. It sure looks very childish, sorry guys. It's my first attempt and I'd like to learn by doing.

Here's the extended code that doens't work.

 $(document).ready(function(){
      $(".dimlight").click(function(){
        $("#overlay").fadeIn();
        $(".dimlight").hide();
        $(".showlight").show();
      });
      $(".showlight").click(function(){
        $("#overlay").fadeOut();
        $(".dimlight").show();
        $(".showlight").hide();
      });
       $("#player").mouseover(function(){
        if ($('#overlay').is(':hidden')) {
                $('.dimlight').show();
            } else {
                $('.showlight').show();
            }
      }).mouseout(function() {  

        if ($('.dimlight').is(':hidden')) {
                $('.showlight').hide();
            } else {
                $('.dimlight').hide();
            }
      });
    }); 

Any help is greatly appreciated.

He're the html:

  <div id="videoplayer_two-col">  
    <span class="dimlight" title="Baisser la lumi&egrave;re">Baisser la lumi&egrave;re</span>
     <span class="showlight" title="Alumer la lumi&egrave;re">Alumer la lumi&egrave;re</span>  

    <video id="player" width="633" height="320" poster="assets/components/ME/media/echo-hereweare.jpg" volume="0.5" controls preload="none">
      <!-- MP4 source must come first for iOS -->
      <source type="video/mp4" src="assets/components/ME/media/echo-hereweare.mp4" />
       <object width="633" height="320" type="application/x-shockwave-flash" data="assets/components/ME/build/flashmediaelement.swf">       
          <param name="movie" value="assets/components/ME/build/flashmediaelement.swf" /> 
          <param name="wmode" value="transparent" />                
          <param name="flashvars" value="controls=true&amp;file=assets/components/ME/media/media/echo-hereweare.mp4" />         
          <!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
          <img src="assets/components/ME/media/echo-hereweare.jpg" width="640" height="360" alt="Here we are" 
            title="No video playback capabilities" />
      </object>     
    </video>

Answer 1

In the second if didn't you want to check the hidden property of #overlay instead as you did in mouseover?

 $(document).ready(function(){
    $(".dimlight").click(function(){
       $("#overlay").stop()
          .removeClass('fOut').removeClass('fIn').addClass('fIn')
          .fadeIn();
       $(".dimlight").hide();
       $(".showlight").show();
    });

    $(".showlight").click(function(){
       $("#overlay").stop()
          .removeClass('fOut').removeClass('fIn').addClass('fOut')
          .fadeOut();
       $(".dimlight").show();
       $(".showlight").hide();
    });

    $("#player").mouseover(function(){
       console.log("mouseover");
       if ($('#overlay').hasClass('fOut')) {
            $('.dimlight').show();
            console.log("dim1");
       } else {
            $('.showlight').show();
            console.log("show1");
       }
    }).mouseout(function() {  
       console.log("mouseout");
       if ($('#overlay').hasClass('fOut')) {
            $('.showlight').hide();
            console.log("show2");
       } else {
            $('.dimlight').hide();
            console.log("dim2");
       }
    });
}); 

Answer 2

//document ready shorthand
$(function(){

  //consolidate jquery object creation, (every $ makes a new jQuery object)
  var dimlight  = $(".dimlight"),
      showlight = $(".showlight"),
      overlay   = $("#overlay")
      isLightOn = true; //your default state

  dimlight.click(function(){
    isLightOn = false; //set state var to dimmed
    overlay.stop().fadeIn(); // use .stop() to prevent animation queue buildup
    dimlight.hide();
    showlight.show();
  });
  showlight.click(function(){
    isLightOn = false; //set state var to lighted
    overlay.stop().fadeOut(); // use .stop() to prevent animation queue buildup
    dimlight.show();
    showlight.hide();
  });

  //hover shorthand
  $("#player").hover(function(){
        if( isLightOn ) { //test state var, more efficient and less error prone
            dimlight.show();
        } else {
            showlight.show();
        }
  },function() {  
        showlight.hide(); // no need for extra logic here, 
        dimlight.hide();  // running .hide() on a hidden element does nothing        
  });
});