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 中，您不想像在mouseover 中那样检查#overlay 的隐藏属性吗？

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