Jquery скрыть элементы на mouseout ()

Question

Я только начал изучать Jquery, и мне посчастливилось заставить что-то работать.Моим первым кодом было создание эффекта «Приглушить свет» при нажатии кнопки и «Показать свет» при выключенном свете.Эта часть работает довольно хорошо.

Вот код:

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

Теперь я хотел сделать еще один шаг вперед.Я хотел бы скрыть любую видимую кнопку (.showlight или .dimlight) при наведении мыши.По сути, активная кнопка должна быть видна только когда пользователь наводит курсор на игрока (#player div).Теперь я попытался сделать это, но это не сработало.Я подозреваю, что синтаксис неправильный.Это выглядит очень по-детски, извините, ребята.Это моя первая попытка, и я хотел бы научиться на практике.

Вот расширенный код, который не работает.

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

Любая помощь очень важна.* Он 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

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

Answer 2

Во втором if вы не хотите проверять скрытое свойство #overlay, как в 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");
       }
    });
});