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

가 지금은 한 단계 더 걸릴 싶어 :

여기에 코드입니다. mouseout에서 보이는 버튼 (.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(); 
      } 
     }); 
    }); 

모든 도움을 주시면 감사하겠습니다.

He're html로 : 당신은 당신이 mouseover에서 한 대신으로 #overlay의 숨겨진 속성을 확인하고 싶지 않았다 두 번째 if에서

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