jQuery在mouseout上隐藏元素（）

Question

我刚开始学习jquery，我很幸运能够找到工作。 我的第一个代码是在按下按钮时创建“Dim the light”效果，当灯光熄灭时创建“显示灯光”。这部分工作很好。

下面的代码：

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

现在我想采取了一步。我想在mouseout上隐藏任何可见按钮（.showlight或.dimlight）。基本上，活动按钮应该只在用户悬停播放器时才可见（＃播放器div）。现在我试着去做，但没有奏效。我怀疑语法错了。它确实看起来很幼稚，对不起，伙计们。这是我的第一次尝试，我希望通过这样做来学习。

下面是扩展的代码do not't工作。

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

任何帮助，非常感谢。

He're的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

在第二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"); 
     } 
    }); 
}); 

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