div 외부에서 div 위로 숨기기

Question

<div id='container'> 
    <div id="animate"></div> 
</div> 

큰 컨테이너 안에는 작은 컨테이너가 있습니다. 나는 누군가가 작은 div의 바깥 쪽을 헤비급으로 움직이면 id가있는 div를 숨기고 싶다. 마우스가 작은 div 위에있을 때 열려 있어야합니다.

Answer 1

당신은 순수 CSS와 같은 효과를 얻을 수 있습니다

#animate { 
    -webkit-transition: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    transition: opacity 0.2s; 
} 

#container:hover #animate { 
    opacity: 0; 
} 

#container #animate:hover { 
    opacity: 1; 
} 

데모 : http://jsfiddle.net/gXz2A/

Answer 2

이해야 할 그

$('#small').hover(function() { 
    $('#animate').show(); 
}, function() { 
    $('#animate').hide(); 
}); 

Answer 3

시도 :

CSS :

#container{width:100px;height:100px;background:#F00;} 
#animate{width:50px;height:50px;background:#0F0;} 

스크립트 :

$(function(){ 
    $('#container').mouseenter(function(){ 
     $('#animate').fadeTo(1000,0) 
        .mouseenter(function(){$(this).fadeTo(1000,1)}); 
    }); // use 750 in place of 1000 to animate it fast 
}); 

문서 http://api.jquery.com/mouseenter/

HTML :

<div id='container'> 
    <div id="animate">&nbsp;</div> 
</div> 

바이올린 :http://jsfiddle.net/aZmfz/4/

Answer 4

HTML :

<div id='container'> 
    <div id="animate">HI!</div> 
</div> 

CSS :

#container{ 
    width: 100px; 
    height: 200px; 
    background-color: black; 
} 
#animate{ 
    height: 50px; 
    width: 100px; 
    background-color: white; 
    opacity: 0; 
} 

jQuery를 : 요소가 더 높이/폭로를 이 없기 때문에

$("#animate").hover(
    function(){ 
     $(this).stop().animate({ 
      opacity: 1 
     }, 1000); 
    }, 
    function(){ 
     $(this).stop().animate({ 
      opacity: 0 
     }, 1000); 
    } 
); 

EXAMPLE

당신은 하지는 엄격한 show/hide을 수행 할 수 있습니다이 숨겨져 있으면 마우스를 가져 가야합니다.. 대신 을 0 (숨기기) 또는 1 (표시)으로 설정하고 animate 함수가 두 함수 사이를 전환하도록 할 수 있습니다. 또한 .stop() 함수를 사용했음을 알 수 있습니다. 이것은 요소 위에 앞뒤로 hover이 있으면 계속 대기중인 애니메이션을 계속 호출하기 때문입니다. 먼저 stop으로 전화하면이 문제를 방지 할 수 있습니다.