Jquery masquer les éléments sur le mouseout()

Question

Je viens juste de commencer à apprendre Jquery et j'ai eu la chance de travailler. Mon premier code était de créer un effet "Dim la lumière" quand un bouton est pressé et "Afficher la lumière" quand la lumière est éteinte. Cette partie fonctionne très bien.

Voici le code:

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

Maintenant, je voulais prendre un peu plus loin. Je souhaite masquer tous les boutons visibles (.showlight ou .dimlight) lors du passage au curseur. Fondamentalement, le bouton actif ne doit être visible que lorsque l'utilisateur survole le lecteur (#player div). Maintenant j'ai essayé de le faire, mais ça n'a pas marché. Je soupçonne que la syntaxe est fausse. C'est vraiment très enfantin, désolé les gars. C'est ma première tentative et j'aimerais apprendre en faisant.

Voici le code étendu qui ne fonctionne pas.

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

Toute aide est grandement appréciée.

He're le code 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

Dans la deuxième if ne voulez-vous pas vérifier la propriété cachée de #overlay à la place que vous avez fait dans 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   
    }); 
});