jQuery를 사용하여 마우스를 올려 놓을 때 호버 상에 항목 표시

Question

지역 코드 위에 마우스를 올려 놓고 싶을 때 (위의 코드로 잘 동작하는) X 시간 동안 아이템 2가 나타나기를 원합니다. 그러나 현재 코드에서 작동하지 않는 클릭하면 더 오래 표시되기를 바랍니다.

  <script> 
      $("#redd").click(function() { 

        $("#raddress").show(); 
        setTimeout(function() { 
         $("#raddress").fadeOut(2000); 
        }, 20000); 
       }); 

      $("#redd").mouseenter(function() { 
        $("#raddress").show(); 
        setTimeout(function() { 
         $("#raddress").fadeOut(5000); 
        }, 1000); 
       }); 
      </script> 

Answer 1

원래의 fadeOut() 함수가 여전히 처리 중이므로 사실을 확인한 후에 클릭하는 이유가 있습니다.

$("#redd").click(function() { 

    /* 
    * The following stops the animation, and fades in back in so that 
    * entire sequence resets, but with a longer time. 
    */ 
    $("#raddress").stop().fadeIn(); 

    setTimeout(function() { 
     $("#raddress").fadeOut(2000); 
    }, 20000); 
}); 

$("#redd").mouseenter(function() { 
    $("#raddress").show(); 
    setTimeout(function() { 
     $("#raddress").fadeOut(5000); 
    }, 1000); 
}); 

Answer 2

그냥 작은 JSFiddle에 포함 시켰습니다. 나는 마녀 JQuery를 사용하고 있다는 것을 모르고 있지만 어쩌면 그것이 문제 일 수 있습니다. 내가 뭔가를 놓쳤습니까? 나는 그것이 도움이되기를 바랍니다

HTML (그냥 2 류) :

<div id=redd>Hover or Click me</div> 
<div id=raddress>I am fading out</div> 

JQuery와 (감안할 때 코드) :

이

$("#redd").click(function() { 

    $("#raddress").show(); 
    setTimeout(function() { 
     $("#raddress").fadeOut(2000); 
    }, 20000); 
}); 

$("#redd").mouseenter(function() { 
    $("#raddress").show(); 
    setTimeout(function() { 
     $("#raddress").fadeOut(5000); 
    }, 1000); 
}); 

바이올린 : LINK